CSS-only Zoom effect on images
Apply a zoom effect to your image with a few lines of code:
- No extra element (only the
<img>tag) - No duplicated images
- Only three CSS properties
- Easy to adjust using CSS variables
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