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

enhanced!

I used a similar technique for zoom on hover codepen.io/thebabydino/... Used here in combination with a `clip-path` reveal effect on scroll codepen.io/thebabydino/...

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.

Watched both Super Troopers a couple of months ago. What a blast.

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

Truly wonderful gems. Beerfest is an absolute required sequel/prequel when watching Super Troopers.

That was my introduction to this lot. Life changing material.

Ditto, these guys were best in the biz and genius writing/acting! P.s. your CSS tool will be coming in handy here soon. Glad I caught your Broken Lizard ref 🤘🏽😂🍻

ProjectWallace is insane!!! Man my day tomorrow just got booked up with refactoring lol thanks man!

Eh... you're welcome? 😅

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

Although the default timing function in element.animate() is linear, just to keep developers on their toes.

Not move is great, fix that hover potential where it infinite loops, a worthy quest

Yay! Someone picked up the dropped torch and is going to carry it across!? Love to hear it

Nice. What were you thinking going from sharp to rounded?

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