Adam Argyle @nerdy.dev · Feb 6

img:hover { scale: 1.2; clip-path: inset( 10% 10% 10% 10% round 20px ); } nice, n' simple codepen.io/argyleink/pe...

270 likes 5 replies

?

Replies

Adam Kuhn · Feb 6

inset round has come in so handy for me for so many instances

Jake Archibald · Feb 6

The latest Canary does lots of clip-path on the compositor too. I haven't tested rounded corners though.

CSS by T. Afif · Feb 6

I did the same with a few calculation here: css-tip.com/zoom-hover-e... Finding the values that makes the image "not move"

Lea Verou, PhD · Feb 6

Oooh and once pointer timeline is here we could also do the effect where you move your pointer to explore different areas of the image, like e-shops often have.

Ana Tudor · Feb 6

Three things: you don't need to repeat the inset 4 times, you can just write it once ease is the default timing function; if that's the one you want, just omit it I don't like longhands, but here it makes sense to avoid duration duplication transition: .2s; transition-property: scale, clip-path