Interactive Cursor-Based Image Magnifier
The ZoomImage component adds a smooth, interactive hover zoom effect to any image in your Framer project. When users hover over the image, it magnifies with a cursor-tracked transform origin, creating a dynamic and responsive zoom experience. This component is ideal for product showcases, portfolio previews, galleries, and interactive hero sections, offering a high-end, engaging interaction that feels fluid and polished.
Engaging Hover Interaction
Smooth zoom on hover: Magnifies the image by a customizable scale factor for a dynamic reveal.
Cursor-based focal point: The zoom centers dynamically on the cursor’s position, creating a natural, immersive feel.
Fluid transitions: Powered by Framer Motion, the animation uses customizable easing and duration for seamless performance.
Responsive reset: On hover leave, the image elegantly returns to its original scale without abrupt movements.
Full Customization Controls
ZoomImage includes property controls so you can easily tailor it to match your design:
Image support: Upload and display any image, with automatic responsive sizing.
Zoom scale: Choose how much the image magnifies (1.1× up to 5×).
Transition timing: Adjust duration and easing for a fast or smooth zoom experience.
Background color: Set a backdrop behind the image for contrast or framing.
Border radius: Add rounded corners (0–50px) for soft, modern styles.
How It Works
The component uses Framer Motion for scaling animations and calculates the cursor’s position relative to the image to update the CSS transform-origin. This means the zoom feels centered on where the user hovers, giving a premium, interactive effect. The zoom smoothly transitions in and out, avoiding any jarring jumps.
Perfect For Modern Web Experiences
Use ZoomImage to:
Showcase product details in e-commerce designs.
Create dynamic portfolio previews.
Add subtle interactivity to image galleries.
Highlight hero images or background visuals with engaging motion.
