Controling the Zoom Effect on the Main Page (2 posts)

  1. Hugh
    Posted 2 years ago #

    Is there a way to make the zoom effect lager? Let me clarify: the zoom effect is the on-mouse-hover and icon appears lager, but really the icon is there the whole time and css border or something is coving it... and on hover, this border disappears revealing more of the icon. Well I want to thin that border when the mouse hovers - so I want even more of it to go away - resulting in showing even more of the picture. (I have a picture currently where the corners are being cut off.)

    I also want to do the opposite, I want to have the closed state of the circle to be tighter. (To hide a portion of the image until mouse hover.)

    What CSS attributes will control this effect for the featured page images on the front page?

    I know that the class for the image zoom is .round-div

    I also posted this question in the theme snippets section here: http://www.themesandco.com/snippet/remove-featured-pages-zoom-effect/comment-page-1/#comment-28604

  2. nikeo
    Theme Author

    Posted 2 years ago #

    Hi @hugh, this zoom hover effect is handled by the transform CSS3 property :
    for the scale :

    transform: scale(1.4);

    and for the speed :

    transition: all 0.3s ease;

    You can easily set new values for those properties targeting the .round-div selector.
    Hope this helps

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic