Skip to main content

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: