Card Hover Anatomy

Key insights

• Lift with weight: raise the card ~8px on hover and stretch its shadow with it over ~200ms ease-out. Faster reads as twitchy, slower feels stuck.
• Claim the cursor: a pulsing accent border or a gradient sweep around the edge stops the card looking flat and signals it's interactive.
• Cascade the actions: reveal hidden buttons (favorite, cart, share) staggered ~60ms apart, anchored at the bottom. A reveal adds an affordance, not a new layout.
• Push against the glass: scale the image to ~1.05 inside an overflow-hidden frame while the container stays fixed — the product presses outward instead of resizing the card.
• The trap — keep the geometry: never scale the whole card. That shifts neighbors and breaks the grid. Animate the content, hold the footprint.

Do / Don't

• Do: Lift the card ~8px and grow its shadow together, using ~200ms ease-out for a sense of weight.
• Do: Stagger revealed actions ~60ms apart and anchor them to the card's bottom edge.
• Do: Scale the image to ~1.05 inside an overflow-hidden frame while the container holds still.
• Don't: Scale the entire card — it shifts neighboring cards and breaks the grid layout.
• Don't: Stack action buttons over the title or let them spill outside the card boundary.
• Don't: Time the lift too fast (twitchy) or too slow (stuck) — 200ms is the sweet spot.