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

• Previous CSS Tip
• Next CSS Tip