Hover Stack

Overview

Hover Stack adds motion to a component that already has a job: cards respond to hover with depth.

Use Hover Stack when a short group of cards should gain shallow depth on exploration. The hover state should add craft while the default card still contains the full heading, copy, and link.

The main risk is overlap. Hover motion must not cover neighbouring links, hide card copy, or make the section unusable on coarse pointers.

Install

Usage

Component Code

Example Production Use Case

An agency service page can use Hover Stack to give service cards a shallow sense of depth on exploration. The hover state adds craft while each card still reads as a normal link or content block.

Best Used For

• Service and proof-card groups where depth on hover makes exploration feel crafted.
• Desktop sections that still work as a normal stack of cards on touch devices.
• Card groups where hover depth adds craft while the non-hover state remains complete.

Not For

Not for mobile-first sections, dense comparison cards, or content where hover depth hides information users need to compare.

Performance Budget

Animate transform and shadow with restraint, keep layers small, and avoid large blur or filter effects on the whole card group.

Accessibility and Mobile

Mirror hover states with focus states, keep links reachable in order, and flatten the stack into normal cards on coarse pointers.

Common Mistakes

• Letting hover depth cover neighbouring card links.
• Forgetting focus-visible states.
• Using hover to reveal required copy.