Sridhar Katakam

Genesis and WordPress Tutorials

Zoom hover effect for images using CSS

by 4 Comments

Using CSS transform and transition properties we can magnify images upon hover.

Example: Adding the following in Minimum Pro's style.css adds the zoom hover effect for images in the Portfolio archive page.

Note: Actual animation will be smoother than what's captured in the above screencast.

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hi Sridhar!

    I got the zoom to work…I’ve used your code exactly as above and:
    replaced .portfolio-image
    with .category-index .featured-content .entry

    When zoomed it is zooming and expanding instead of zooming and being contained to the original image size as in your tutorial above. I’m working on a local install so I can’t share it live.

    I’ve uploaded screenshots of the no hover and on hover:
    http://triplelattedesign.com/wp-content/uploads/2017/03/Hover-Before-After.jpg

    What am I missing?

    Thanks!

    Reply
    • >