Customize popup thumb

You can change the thumb size by using Custom CSS. We recommend using Theme Customizer -> Additional CSS section for adding Custom CSS.

Change the size of popup thumb: #

Version 2.1

._df_thumb{
    width:240px;
}

Before version 2.1

._df_thumb{
    width:240px;
    height:360px;
}

Tips: In mobiles using bigger size can result in thumb not fitting to mobile screen size. Thus adding a mobile specific constraint helps:

._df_thumb{
    width:340px;
}

@media only screen and (max-width: 500px) {
    ._df_thumb{
        width:100%;
    }
}

---

Disable cover opening animation of popup thumb: #

To disabled cover opening animation use the following custom CSS.

.df-popup-thumb:hover * {
    transform: none !important;
}
.df-popup-thumb .df-book-page1,
.df-popup-thumb .df-book-page2{
    display:none;
}

Output:

Meat Atlas

---

Disable cover zoom animation of popup thumb: #

To disabled zoom animation use the following custom CSS.

.df-popup-thumb img.df-lazy {
  transform: scale(1);
  opacity: 1;
}

Output:

Meat Atlas

---

Remove the left side ridge from popup thumb, make popup thumb cover flat #

To remove the ridge and make the cover flat/plain, you can use following CSS:

.df-popup-thumb .df-book-cover:after {
    display:none;
}

Output:

Meat Atlas

---

Title Customization: #

Titles can be customized with the CSS selector: .df-popup-thumb span.df-book-title

Hide Title from thumb: #

.df-popup-thumb span.df-book-title {
    display: none;
}

Title Always active without hover: #

.df-popup-thumb span.df-book-title {
    bottom: 0;
    opacity: 1;
}