OneTaskBy Tim King · Updated
Image Hover Zoom
CSS Zoom on Hover and Follow-the-Pointer Zoom
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Image Hover Zoom works
An image hover zoom enlarges a photo inside its frame when the mouse moves over it. Pick a gentle zoom to centre for cards and galleries, a zoom out that reveals the full picture, or a product zoom that follows the pointer, then copy the HTML and CSS.
The effect needs no library. The image sits inside a box with overflow: hidden, and on hover the
image is scaled with transform: scale(). Because transform does not change the layout, nothing
around the picture moves, and the browser animates it on the graphics card so it stays smooth.
How the image hover zoom works
The box keeps its size and clips whatever grows past its edges. The transition on the image sets
how long the zoom takes; 0.3 to 0.5 seconds feels responsive without being jumpy. The same rule
applies on :focus-visible, so keyboard users who tab to the image see the zoom too.
Follow-the-pointer zoom
For shop product photos, a zoom that magnifies the spot under the cursor lets shoppers inspect
stitching or texture. A few lines of script move transform-origin to the pointer position as it
moves, so the scale grows out from that point. Use a larger zoom, around 2 to 2.5, for this effect.
Zoom out
The zoom out effect starts with the image slightly enlarged and returns it to normal size on hover, which works well for hero tiles where the crop hides part of the picture.
FAQ
Why does the image spill outside its box?
The zoom only stays inside the frame when the parent has overflow: hidden. If you move the
transform to a different element, make sure the element with the rounded corners and hidden
overflow wraps the one that scales.
Does the hover zoom work on phones?
Touch screens have no hover, so most phones apply the hover style briefly on tap and remove it on the next tap elsewhere. The image still displays normally; for zoomable product photos on mobile, pair it with a lightbox that opens the full image.
Will the zoomed image look blurry?
Scaling enlarges the pixels you already have, so a 600 pixel wide photo zoomed to 2 times shows at 1200 pixels of detail stretched from 600. Serve an image at least as wide as the display width multiplied by the zoom amount for a sharp result.
Does it respect reduced motion settings?
Yes. A prefers-reduced-motion media query removes the transition, so visitors who have asked
their system for less movement still get the zoomed view but without the animated scaling between
the two states.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Image Gallery Builder
Build a responsive CSS grid photo gallery with captions and hover effects.
Lightbox Builder
Build a dependency-free image lightbox with keyboard and swipe support.
Hover Card Builder
Card hover effects with timing controls, previewed live.
Image Filter Sandbox
Slide eight filter functions and copy the CSS declaration.
Responsive Image Generator
Generate srcset, sizes and picture markup for responsive images.