You can create this secret code reveal with only CSS using :has() and trig function 🔥
.digit::hover + .digit,
.digit:has(+ .digit:hover) {
--active: var(--lerp-1);
}
:root {
--lerp-1: calc(sin(50deg));
}
.digit {
scale: calc(var(--active) + 0.5);
}
There are a couple of moving parts. The first thing we can do is set up a scale.
:root {
--lerp-0: 1; /* === sin(90deg) */
--lerp-1: calc(sin(50deg));
--lerp-2: calc(sin(45deg));
--lerp-3: calc(sin(35deg));
--lerp-4: calc(sin(25deg));
--lerp-5: calc(sin(15deg));
}
The digit styles define scale and blur. They also dictate the transition duration
.digit {
transition: scale calc(((1 - var(--active, 0)) + 0.2) * 1s);
}
When a digit is hovered, then you can set the --active custom property based on the digit position 🤙
The digit that is hovered.
.digit:hover {
--active: var(--lerp-0);
}
And the digit on either side of that hovered digit
.digit:is(:hover, :focus-visible) + .digit,
.digit:has(+ .digit:is(:hover, :focus-visible)) {
--active: var(--lerp-1);
}
We can select the previous sibling using :has() and the next sibling with the sibling combinator (+)
And that's it! ⭐️ That's how you create these hover scale interactions with CSS 🙌
We're jus' waiting on Firefox for :has() support. When that lands, it'll likely break the internet 😅