Thumb Hover Animation for RTL Books

  • Resolved lefemi4231

    (@lefemi4231)


    3 years, 1 month ago

    First of all, thank you for this wonderful plugin.
    I’ve encountered a small issue. When you hover over a thumbnail of the book, the thumb animates by slightly opening from the right side which is good for the Left-to-Right (LTR) books but I’ve an Arabic book which obviously is Right-to-Left (RTL) so the thumb hover animation is wrong in this case.

    Is there any way that I could change the hover animation in opposite direction only for this particular book through its book-ID with the help of CSS?

    Will highly appreciate your help in this regard.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author DearHive

    (@dearhive)

    Hi,

    We had this case once before. And the following CSS was able to achieve the required. Give it a try:

    ._df_thumb ._df_book-cover {
    transform-origin: right;
}

._df_thumb:hover ._df_book-cover {
    -webkit-transform: rotateY(20deg) rotateZ(0);
    -moz-transform: rotateY(20deg) rotateZ(0);
    -ms-transform: rotateY(20deg) rotateZ(0);
    transform: rotateY(20deg) rotateZ(0);
}

    Add this custom CSS in Additional CSS section of Customizer.

    Best Regards,
    DearHive

    • This reply was modified 3 years, 1 month ago by DearHive.
    Thread Starter lefemi4231

    (@lefemi4231)

    Thank you so much. It worked perfectly with a little tweak.

    If someone wants to change the thumb hover animation to RTL for a specific book only then add the following CSS. Just change the “1214” to your book ID which is mentioned in the book shortcode.

    Cheers!

    div#df_1214._df_thumb ._df_book-cover {
    transform-origin: right;
}

div#df_1214._df_thumb:hover ._df_book-cover {
    -webkit-transform: rotateY(20deg) rotateZ(0) ;
    -moz-transform: rotateY(20deg) rotateZ(0) ;
    -ms-transform: rotateY(20deg) rotateZ(0) ;
    transform: rotateY(20deg) rotateZ(0) ;
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Thumb Hover Animation for RTL Books’ is closed to new replies.

Tags