Stacked Cards Pattern

Build horizontally cascading card stacks where cards overlap in order, with hover animations that lift cards in place without breaking the cascade.

Why This Pattern?

Stacked cards have three common bugs:

1. Wrong stacking order - Later cards in the array appear on top
2. Hover breaks cascade - Changing z-index on hover disrupts the visual order
3. Tooltip trapped in stacking context - Tooltips inside cards can't escape their parent's z-index

This pattern solves all three.

Core Concept

First card (front)    Last card (back)
     ↓                      ↓