Here's a zoom on hover effect created in Framer without the need for any code. Feel free to remix it and use it in your next project!
Overview
Zooming an image on hover is one of the most used methods in web design to tell the user that clicking on the card/image will trigger a change on the page - and this component does exactly this.
This simple zoom on hover effect is applied to the entire card, ensuring that the image zooms slightly even when hovering over the text.
The effect is achieved by expanding the image on hover to be slightly larger than its container, without displaying any overflow.
In practice, you would set the container to have fixed dimensions and the image to occupy 100% of the container's size when inactive and 105% when hovered over.
This creates a subtle zoom effect that enhances the card's visual appeal.
Overview:
Here's a zoom on hover effect created in Framer without the need for any code. Feel free to remix it and use it in your next project!
