Magic Hover Image

Give your visuals personality. Magic Hover Image turns any section into an interactive reveal where images follow the cursor with fluid motion and depth-rich effects. It transforms static layouts into cinematic moments — perfect for hero sections, feature highlights, or portfolio case studies.

With seven different motion styles — from soft parallax float to dramatic 3D tilt and dynamic color/blur tracking — every hover feels alive. The animation engine is GPU-optimized and tuned for optimal performance on both desktop and mobile devices.

Why designers love it

• Instantly makes sections feel premium and interactive

• Works with any layout — no redesign needed

• Looks stunning with photos, product shots, and UI previews

• Designed for modern UX: subtle motion when you want it, dramatic motion when you need it

Customization Categories

• Effect: choose from 7 motion styles (float, tilt, scale, blur, color shift, opacity, morph)

• Image: upload or connect via CMS, adjust size + offsets

• Styling: border radius, border, shadow

Quick Setup

1. Add Magic Hover Image to your canvas

2. Resize the frame to define the hover area

3. Choose an effect style and upload an image

4. Publish — every hover now has motion and depth.

After completing your purchase, you will receive a link to the component.

Copy the URL and paste it into your Framer project to import it.