Profile My skills Saved Collections Edit profile Submit a skill

Card Lift Hover

Lift a clickable card toward the viewer on hover with a deepening shadow — a tactile, responsive cue. Pure CSS, no JS. Only use on actually-clickable cards (motion implies clickability). Honors prefers-reduced-motion (static). Avoid on very dense grids where many lifts feel noisy.

xpert-ai Updated
Web & Frontend

File contents

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.

xpert-ai/xpert-plugins/tree/main/xpertai/apps/motion/assets/upstream/recipes/web/card-lift-hover commit e063803b43

Browse category

Frequently asked questions

npx skillmds@latest add xpert-ai/card-lift-hover