Ana Tudor 🐯: "How do you get a zoom effect o…" - Mastodon

Ana Tudor @anatudor@mastodon.social

How do you get a zoom effect on an `img`? So that you still have the right click `img` menu and also don't need any extra element?

Here's how on @codepen: https://codepen.io/thebabydino/pen/BaGYPPV

Prompted by coming across a demo that gets the effect with a `div` wrapped in an `overflow: hidden` parent.

/* single img zoom effect in just a few declarations */
img {
/* amount padding-box edges move out by
* = the maximum possible padding */
--d: 1.5em;
/* so border-box doesn't increase with padding */
box-sizing: border-box;
/* maximum passible padding (1 - 0)*d = d initially
* zero padding (1 - 1)*d = 0 in hovered case */
padding: calc((1 - var(--f, 0))*var(--d));
/* no image distortion regardless of set dimensions */
object-fit: cover;
/* clip everything within a distance d inwards
* from border limit */
clip-path: inset(var(--d));
/* smooth zoom effect */
transition: padding .4s;

/* is hovered flag f switches to 1 */
&:hover { --f: 1 }
}

GIF

#CSS #clip #clipPath

Jul 30, 2024, 08:33 AM·

11boosts·26favorites

Drag & drop to upload