Controling the Zoom Effect on the Main Page

  • 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: https://www.themesandco.com/snippet/remove-featured-pages-zoom-effect/comment-page-1/#comment-28604

Viewing 1 replies (of 1 total)
  • Theme Author presscustomizr

    (@nikeo)

    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

Viewing 1 replies (of 1 total)
  • The topic ‘Controling the Zoom Effect on the Main Page’ is closed to new replies.