Upload an image
See the effect on your own photo, or keep the placeholder gradient.
CSS Image Hover Zoom Generator
Upload an image, tune a hover-zoom effect that stays clipped inside its frame, then copy the ready-to-use CSS.
'/%3E%3C/svg%3E)
Ready-to-use HTML + CSS
How it works
Tune scale and speed
Set how much it zooms, how long the transition takes and the corner radius.
Copy the code
Get contained, clipped hover-zoom CSS ready for any image gallery or card.
FAQ
How does the zoom stay contained?
The image sits inside a wrapper with overflow: hidden. The image itself scales up on hover, but the wrapper's fixed size and clipping keep the zoomed image from spilling outside the frame.
Is my uploaded image sent anywhere?
No. It's only used to preview the effect locally in your browser; the generated CSS references your own image path, not the uploaded file.
Can I apply this to a background-image instead of an img tag?
Yes, apply the same overflow and transition rules to a container with background-size: cover, and scale the container's background-size on hover instead.