Skip to main content
CSS Tip

CSS-only Zoom effect on images

Apply a zoom effect to your image with a few lines of code:

A zoom effect on images

img {
--zoom: 1; /* control the zoom level */
/* the coordinate of the zoom */
--x: 50%;
--y: 50%;
/**/
transform: scale(var(--zoom));
transform-origin: var(--x) var(--y);
clip-path: inset(
calc((1 - 1/var(--zoom)) * (var(--y)))
calc((1 - 1/var(--zoom)) * (100% - var(--x)))
calc((1 - 1/var(--zoom)) * (100% - var(--y)))
calc((1 - 1/var(--zoom)) * (var(--x)))
);
}

See the Pen CSS only zoom effect on image by Temani Afif (@t_afif) on CodePen.

More detail: verpex.com/blog/website-tips/how-to-make-a-zoom-effect-using-css


More CSS Tips