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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
