CSS Tip

Zoom effect on hover

Add a simple zoom effect on hover for your images with a small code

img {
  --f: 1.15; /* the scale factor */
  
  clip-path: inset(0);
  transition: .4s;
}
img:hover {
  clip-path: inset(calc((1 - 1/var(--f)) * 50%));
  scale: var(--f)
}

See the Pen Zoom effect on hover (single element) by Temani Afif (@t_afif) on CodePen.

More detail: verpex.com/blog/website-tips/css-effects-on-images-ii

More CSS Tips