Link Hovers

I wanted a set of link hover effects, and I used it as practice: each one uses a different CSS trick, as many as I could think of.

1. Every effect is one trick: a growing background, a pseudo-element, a text shadow or a keyframe.
2. The countdown uses @property, so --countdown animates as a whole number from 8 to 0.
3. The whole card is the hover target, and keyboard focus and taps play it too.
4. Night is worth a look: Difference inverts the other way on a dark card, and Glow and Stack only really show up there.

1. Dec 2022: first version, made on CodePen (v1).
2. Oct 2026: redesigned for the lab. Kept all 20 and toned down the loud ones (4, 6, 17, 18), named the trick on each card, and added a switch that shows every hover state at once.