Hover Lift
悬浮上浮
Aliases:卡片悬浮hover 浮起鼠标放上去浮起来上浮效果悬停抬升卡片浮起来
What is it
On hover, a card or button lifts slightly (translateY -2–6px) while its shadow deepens — as if raised by an invisible hand. The most common desktop affordance for "this is clickable": nearly free, instantly adds depth and life.
Interactive playground
Try it. Make an informed choice.Loading demo…
✓ When to use
- Card grids, product cards, article cards — clickable blocks
- Desktop-first contexts — hover is a desktop language
- When flat layouts need to separate interactive from static elements
✕ When not to use
- Touch devices — no hover, sticky triggers; use press feedback instead
- Everything lifts — the affordance inflates and stops meaning anything
- Large offsets — beyond 8px it feels jumpy
Variants
Lift + shadow
上浮 + 投影
The classic — -4px + deeper shadow
Lift + scale
上浮 + 微放大
Adds scale(1.02) — more e-commerce energy
Lift + border
上浮 + 边框着色
Swap shadow for accent border — suits flat styles
Implementation
transform: translateYbox-shadowtransition:hover`transition: transform 200ms ease, box-shadow 200ms`; on hover translateY(-4px) plus a larger, softer shadow (e.g. 0 12px 24px rgba(0,0,0,.12)). The shadow grows and lifts together with the element. Pairs with press-feedback: lift on hover, scale back on press.
Compare
Full comparison →| Hover Lift悬浮上浮 | Hover Glow悬停发光 | |
|---|---|---|
| Intensity | Medium | Medium to strong — visually loud |
| Best for | Cards / medium blocks | Buttons / icons / dark cards |
| Mobile friendly | Poor — no hover on touch | Poor — no hover on touch |
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Add hover lift feedback to the project's card lists. Inspect existing card components first; keep radius and shadow tokens consistent. Requirements: - 4px rise + deeper shadow on hover, 200ms transition - Only on hover-capable devices (@media hover:hover) - Respect prefers-reduced-motion - No layout shift (transform-based) Run existing checks when done and list modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
When users press a clickable element it scales down slightly (typically 0.95–0.98) and springs back on release. A few tens of milliseconds that make a UI feel like physical buttons instead of flat web pages.
MotionSimilarOn hover, a soft glow blooms around the element's edges — an outer box-shadow or radial gradient tinted with the brand accent. Unlike a shadow's physical lift, glow signals energy and interactivity; common on dark UIs, gaming products and neon-style buttons.
MotionAlternativeA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsApplies toAs the cursor approaches, the button is pulled toward it like iron to a magnet, then springs home on leave. The offset is computed from cursor-to-center distance and usually clamped to 8–20px. A tactile desktop flourish common on portfolios and creative sites.
MotionSimilar