• Previous CSS Tip
• Next CSS Tip

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

More CSS Tips

• Tooltip using mask Use CSS mask to create a tooltip with a gradient coloration. April 04, 2022
• Section divider Use clip-path and CSS mask to create a section divider. March 07, 2022
• CSS-only folded ribbon Use clip-path to create fanct folded ribbon. February 07, 2022
• A single-element spinner loader A mask trick to create a simple CSS loader with a single element. February 02, 2022