# 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.

- Skill: `nexu-io/card-lift-hover` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add nexu-io/card-lift-hover`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nexu-io/card-lift-hover/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Nexu (https://skillmd.com/u/nexu-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nexu-io/card-lift-hover

---


# card-lift-hover

A clickable card that lifts on hover. Pure CSS. Part of
[motion-anything](https://github.com/nexu-io/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.