HoverScale

Provides a subtle zoom or lift animation on hover for images and cards. Ideal for photo‑heavy wedding sites, it creates a responsive, interactive feel using pure CSS for smooth 60 fps performance.

Use Cases

• Photo galleries (venue photos, couple images, guest moments)
• Team/guest profile cards
• Testimonial cards
• Service/feature cards with images
• Portfolio project previews
• Product images (e‑commerce)
• Interactive image grids

Properties

effect

Type: string. Type of hover effect. Options: zoom, lift, rotate-zoom. Default: zoom. Visual Impact: zoom – Simple scale up – clean, versatile (most common); lift – Scale + translateY + shadow – adds depth to cards; rotate-zoom – Scale + rotation – creative, playful. Recommendations: photos → zoom (simple, clean); cards → lift (depth and elevation); creative → rotate-zoom (playful, artistic).

scale

Type: number. Scale amount on hover (1.02‑1.15). 1.05 is balanced, 1.08 is energetic. Default: 1.05.

transitionSpeed

Type: number. Transition duration in seconds. 0.3‑0.4 s feels responsive. Default: 0.3.

shadowIntensity

Type: string. Shadow depth (for ‘lift’ effect). Options: none, subtle, moderate, strong. Default: moderate. Recommendations: photos → none or subtle; cards → moderate (balanced depth); bold → strong (dramatic elevation).

grayscaleToColor

Type: boolean. Start grayscale, transition to color on hover. Creates an artistic reveal effect for photo galleries. Default: false.

cursorPointer

Type: boolean. Show pointer cursor on hover. Set true for clickable elements. Default: true.

Best Practices

• Only use on clickable/interactive elements (cards, images, links).
• Use subtle scale (1.02‑1.08); larger values appear exaggerated.
• Set transitionSpeed to 0.3‑0.4 s for a responsive feel.
• Choose effect='zoom' for a simple, clean hover (most versatile).
• Choose effect='lift' for cards with shadows to add depth.
• Choose effect='rotate-zoom' for creative/playful contexts (portfolios, creative work).
• Use shadowIntensity='moderate' for balanced depth.
• Enable grayscaleToColor for artistic photo galleries (black & white → color on hover).
• Set cursorPointer=true to hint interactivity.
• Good for: photos, team cards, testimonials, gallery items, feature cards.
• Avoid: background images, non‑interactive static elements, text content.
• Wedding use: venue gallery images, couple photos, guest photos, testimonial cards.

Common Mistakes

Using large scale (> 1.10) on photos

Why it's a problem: Excessive zoom looks exaggerated and unprofessional.

Fix: Use scale=1.05 for a balanced effect, 1.08 maximum for energetic.

Using HoverScale on background images or static content

Why it's a problem: Hover effects should indicate interactivity – background images aren’t clickable.

Fix: ONLY use on clickable elements (gallery images, cards, links).

Using slow transitionSpeed (> 0.6s)

Why it's a problem: Slow transitions feel laggy and unresponsive.

Fix: Use 0.3‑0.4 s for a snappy, responsive feel.

Using rotate-zoom for professional/wedding contexts

Why it's a problem: Rotation is playful and casual – not appropriate for elegant weddings.

Fix: Use effect='zoom' or 'lift' for weddings/professional settings; reserve 'rotate-zoom' for creative portfolios.

Forgetting cursorPointer on clickable elements

Why it's a problem: Users expect a pointer cursor on clickable items – lack of cursor hints confuses.

Fix: Set cursorPointer=true for clickable images/cards.