Hover Microinteraction Catalog

When to use this

• Styling navigation links with animated underlines, wipes, or reveals.
• Adding tactile hover feedback to cards (tilt, glow, border draw).
• Building text hover effects like character shuffles, color wipes, or split reveals.
• Implementing icon transitions on button hover (swap, rotate, slide).
• Do NOT use this for full-page transitions between routes; see page-transition-choreography instead.

Mental model

Every hover effect follows the same structure: a resting state, a transition in, a hovered state, and a transition out. The in and out can be different (a line wiping left-to-right in, then right-to-left out, creating a continuous directional flow). The trick that separates professional hover effects from amateur ones is that the exit animation is not the reverse of the entrance.

CSS hover effects use pseudo-elements (::before, ::after), clip-path, background-size/background-position, and transform. JS hover effects use class toggling or inline style updates on mouseenter/mouseleave.

The timing sweet spot for hover effects is 200-350ms. Under 150ms reads as instant (might as well not animate). Over 400ms feels sluggish and blocks the user from scanning quickly.

Hover effects must degrade on touch. Most CSS :hover effects on touch trigger on tap and stick until the user taps elsewhere, which looks broken. Use @media (hover: hover) to scope all hover animations to pointer devices.