--- name: hover-animation-safety description: Safe hover and animation patterns that don't cause layout issues. Use when implementing hover effects, transitions, or animations on cards and interactive elements. --- # Hover & Animation Safety Patterns for hover effects that don't break layouts. --- ## The Scale Problem `hover:scale-*` is dangerous because it makes elements overlap: ``` Normal state: ┌─────────┐ ┌─────────┐ ┌─────────┐ │ Card │ │ Card │ │ Card │ └─────────┘ └─────────┘ └─────────┘ On hover with scale: ┌─────────┐ ┌───────────┐ ┌─────────┐ │ Card │ │ Card │ │ Card │ └─────────┘ │ SCALED │ └─────────┘ └───────────┘ ↑ Overlaps neighbors! ``` **Even worse:** Cards under tabs\/navigation can overlap into them. --- ## Rule 1: No Scale on Constrained Elements ```tsx \/\/ ❌ DANGEROUS - Scale causes overlap

Card<\/div>

Image<\/div> \/\/ ✅ SAFE - No size change

Card<\/div>

Card<\/div> ``` --- ## Safe Hover Alternatives ### Border Highlight ```tsx

``` ### Background Change ```tsx

``` ### Shadow Elevation ```tsx

``` ### Border + Background Combo ```tsx

``` ### Opacity Change ```tsx

``` --- ## When Scale IS Safe Scale is okay when: 1. Element has padding\/margin around it 2. It's the only element (hero image) 3. It's inside an `overflow-hidden` container ### Safe Scale: Inside overflow-hidden ```tsx

<\/div> ``` ### Safe Scale: Isolated element ```tsx

{\/* Plenty of padding *\/}

Isolated card <\/div> <\/div> ``` --- ## Animation Timing ### Recommended Durations | Effect | Duration | Use Case | |--------|----------|----------| | Color\/opacity | `duration-200` | Buttons, links | | Shadow | `duration-300` | Cards, elevations | | Transform | `duration-300` to `duration-500` | Images, large elements | ### Easing ```tsx \/\/ Default (good for most) transition-all \/\/ Smooth out transition-all ease-out \/\/ Bounce effect transition-all ease-[cubic-bezier(0.34,1.56,0.64,1)] ``` --- ## Group Hover Patterns For child elements that react to parent hover: ### Image Zoom in Card ```tsx