HoverScale

Provides a subtle zoom or lift animation on hover for images and cards. It adds responsive, interactive feel to photo‑heavy sites while keeping performance smooth with pure CSS.

Use Cases

• Photo galleries such as venue photos, couple images, or guest moments
• Team or guest profile cards
• Testimonial cards
• Service and feature cards that contain images
• Portfolio project previews
• Product images for e‑commerce
• Interactive image grids

Properties

effect

Type of hover effect. Type: string. Options: zoom, lift, rotate-zoom. Default: zoom.

Tip: Recommended effect for photos – zoom; for cards – lift; for creative contexts – rotate-zoom.

Visual Impact: zoom – simple scale up, clean and versatile; lift – scale plus translateY and shadow for depth; rotate-zoom – scale plus rotation for a playful look.

scale

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

transitionSpeed

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

shadowIntensity

Shadow depth (for ‘lift’ effect). Type: string. Options: none, subtle, moderate, strong. Default: moderate.

Tip: Recommended shadow for photos – none or subtle; for cards – moderate (balanced depth); for bold designs – strong (dramatic elevation).

grayscaleToColor

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

cursorPointer

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

Best Practices

• Apply only to clickable or interactive elements such as cards, images, or links.
• Use a subtle scale range of 1.02‑1.08; larger values appear exaggerated.
• Set transitionSpeed between 0.3‑0.4 s for a responsive feel.
• Choose effect='zoom' for a simple, clean hover—the most versatile option.
• Choose effect='lift' for cards with shadows to add depth.
• Choose effect='rotate-zoom' for creative or playful contexts like portfolios.
• 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, and feature cards.
• Avoid applying to background images, non‑interactive static elements, or pure text content.
• Wedding use: venue gallery images, couple photos, guest photos, and 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, with a maximum of 1.08 for a more energetic feel.

Using HoverScale on background images or static content

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

Fix: Apply only to clickable elements such as gallery images, cards, or 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, which isn’t appropriate for elegant weddings.

Fix: Use effect='zoom' or 'lift' for weddings or 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; lacking this hint can cause confusion.

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