CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list?... Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇show more

Here's that @CodePen link! 🚀 Should get something good in all browsers 🫶 That's the joy of progressive enhancement!

Fun fact: Transitioning CSS anchor positioning wasn't going to work 🥲 But, some early demos I put together for you helped change that 🙏 The transitioning regressed in a Chome Canary update and those "fun" demos helped solve it 🔥

When CSS anchor-default shipped in Canary, another fun demo idea prompted whether we could use that to transition anchors 🤔 And that raised another Chromium issue 👇 The gist of the story is: "Building all sorts of different things helps the platform"

And this was the demo that prompted that whole CSS exploration in the first place 😅 Jus' wanted to make a bear paw move between the inputs because you can ʕノ•ᴥ•ʔノ ︵ ┻━┻

🔥

Any ideas how to accomplish this

How do you want it to work? On scroll? On click? Can definitely throw something together for you 🤙

Made something like that using svelte.

Have you seen the one @KevinJPowell did where you can see the gutters on the grid? Pretty sick

@KevinJPowell Not sure I have. Someone tagged me in the quoted post and it reminded me of transitioning anchor position And that reminded me of an issue I raised from working with the spec last year 🤓