Thread by @jh3yy

Oh, this? 👀

Jus' a pure CSS image zoom using CSS primitives 🔥

– :has()
– object-view-box
– Houdini @ property

Code 👇

img {
object-view-box: inset(var(--top) ...);
}

:root:has(#car:checked) {
--top: 61%;
...
}

Amazing 🥲

👉 codepen.io/jh3y/pen/QWQrV… via @CodePen

Let's break down what's going on here 😎

I will not call this a thread...

The first property "object-view-box" allows us to apply an SVG like viewBox to an element such as an <img>. In this demo, I map the different "viewBox" to the different "Zoom" spots.

Next up, how do we change the zoom by hitting the radio buttons without JavaScript?

Well, let's introduce :has() (The parent selector) 🚀

If we detect a certain radio button is :checked under :root, we can update the custom properties in :root 🔥

Last but not least, Houdini's "@ property" or the Properties and Values API 💙

This allows us to animate and transition custom properties by providing context to the browser via types 🤓 When the browser knows a type, it can transition things, like our inset values! 💫

Thanks for reading my spontaneous and random collection of tweets for a demo I spontaneously threw together quick in a moment of inspiration ✨

Stay awesome y'all!

✨
ʕ •ᴥ•ʔ／

p.s In my excitement, I completely forgot to mention...

"Chrome Canary with Experimental Web Platform Features flag on" ⛳️🐦

It's late. I'm hungry. But, I'm also very excited about what amazing CSS things we're going to be cooking up! 💙

p.p.s Get ready for "⚡️ Speedy CSS Tips! ⚡️" style content on this coming soon! 👀