Magic Hover Image
A dynamic image follows the cursor with 7 customizable visual effects—smooth, responsive, and perfect for modern web interactions.
Make it with Workshop
Build your own component with AI
A dynamic image follows the cursor with 7 customizable visual effects—smooth, responsive, and perfect for modern web interactions.
Make it with Workshop
Build your own component with AI
Magic Hover Image is an interactive, cursor-reactive image component that brings motion and depth to your designs. When users hover over a defined area, an image gracefully appears and follows their cursor — enhanced by seven unique visual effect modes ranging from smooth parallax floating to complex 3D tilts and dynamic filters.
Built with performance-optimized motion logic and GPU-accelerated rendering, Magic Hover Image delivers silky-smooth, reactive movement on any device.
Interactive hover-based image tracking with customizable easing
Seven distinct effect modes for different styles and motion behaviors
Smooth, responsive transitions and real-time cursor tracking
Lightweight, GPU-optimized animation system for high performance
Works seamlessly across hero sections, banners, and content reveals
Fully customizable visual properties, including size, border, shadow, and offset
Supports both static uploads and CMS-connected images
• Effect Type — Choose from 7 modes:
- Image Float (rotation based on cursor position)
- Tilt 3D (adds perspective tilt)
- Scale on Proximity (scales relative to center distance)
- Blur/Focus (sharpens or blurs with motion speed)
- Color Shift (hue rotation based on cursor speed)
- Opacity Variations (fades dynamically)
- Morph Shape (morphs between circle and square by speed)
• Rotation Amount
• Max Blur
• Hue Shift
• Smoothing
• Upload custom image or connect to CMS
• Set image dimensions
• Adjust offsets
• Border Radius
• Border
• Shadow
1. Copy and paste the Magic Hover Image component into your Framer project.
2. Add it to your canvas — it acts as the hover-sensitive container area.
3. Resize the frame to define the interaction zone.
4. Select an Effect Type in the properties panel.
5. Upload your image or connect it via CMS using the “+” icon.
6. Adjust visual styling (size, border, shadow, radius).
7. Fine-tune effect-specific properties like rotation, blur, or hue shift.
8. Control animation smoothness using the Smoothing slider.
9. Modify Offset values to position the image relative to the cursor.
10. Preview the effect — hover and watch the image come alive!
