card-lift-hover

card-lift-hover

A clickable card that lifts on hover. Pure CSS. Part of motion-anything; obeys MOTION-SPEC.md.

When to use it

• Clickable cards / tiles in a grid that should feel tactile.

When NOT to use it (restraint)

• Non-interactive cards — the lift implies it is clickable.
• Very dense grids where many simultaneous lifts feel noisy.

How to apply

1. Copy card-lift-hover.css and link it.
2. Add the class: <a class="lift-card" href="…">…</a>. No JavaScript needed.

Accessibility & performance

• prefers-reduced-motion: no lift (a subtle shadow change remains). Transform + shadow only.