Zoom Image
A dynamic, motion-powered image zoom built with Framer Motion. Offers smooth hover or click-based magnification with customizable blur, grayscale, overlay, and rotation effects.
Make it with Workshop
Build your own component with AI
A dynamic, motion-powered image zoom built with Framer Motion. Offers smooth hover or click-based magnification with customizable blur, grayscale, overlay, and rotation effects.
Make it with Workshop
Build your own component with AI
ZoomImage turns any image into an immersive, interactive element that reacts naturally to cursor movement. Designed for portfolios, product previews, or feature highlights, it provides precise zoom control, optional overlays, shadows, and motion effects—all powered by Framer Motion for buttery-smooth animation.
Whether you want a subtle hover magnification or a cinematic click-to-zoom reveal, ZoomImage adapts easily. It includes fine-tuned spring physics, customizable filters, and real-time motion tracking, giving your visuals depth and polish without performance trade-offs.
Key Features
Smart Motion Zoom — Smooth hover or click-based scaling with realistic easing.
Spring or Tween Animation — Choose your preferred animation type and timing.
Custom Overlays — Add color overlays that appear always or only on hover.
Shadow & Border Controls — Full styling flexibility with size, color, and radius options.
Advanced Effects — Optional grayscale, blur, and rotation settings.
Cursor Modes — Zoom-in, grab, or pointer behavior for tailored UX.
Performance Optimized — Runs efficiently on all devices using Framer Motion’s GPU-accelerated transforms.
How to Use
Drag ZoomImage onto your Framer canvas.
In the right-hand properties panel, set your Image Source and Alt Text.
Toggle Enable Zoom and choose your zoom type:
Hover Zoom (default) — zooms while hovered.
Click Zoom — toggles zoom in/out on click.
Adjust Zoom Scale, Animation Type, and Spring Settings to match your style.
(Optional) Enable Overlay, Shadow, Grayscale, or Blur for added visual depth.
Customize Cursor Type, Border, and Background Color for complete control.
Your image will now animate fluidly in response to user interaction—ideal for polished portfolios, e-commerce previews, and landing pages that demand refined motion.
