Mouse Lens Zoom is an interactive Framer component that adds a magnifying glass effect to images. As the cursor moves across the image, a lens follows the mouse and reveals a zoomed-in version of the image inside it.
You can control the zoom level, lens size, shape, border style, and whether the lens appears only on hover or stays visible at all times. The component is smooth, responsive, and ideal for showcasing visual details without navigating away from the page.
Mouse-following lens zoom effect
Adjustable zoom level
Customizable lens size
Circle or square lens shape
Configurable lens border width and color
Option to show lens on hover or always visible
Smooth performance and responsive behavior
Product image previews
Portfolio and photography sites
E-commerce detail views
Image comparisons and showcases
Interactive visual storytelling
Use high-resolution images for best zoom clarity
Keep zoom levels subtle to avoid pixelation
Match lens border color to your UI for a polished look
One Mouse Lens Zoom component
Image, zoom, and lens customization controls
Hover behavior toggle
Framer designers and builders
Product designers and marketers
E-commerce creators
No-code users adding interactive image details
Mouse Lens Zoom is an interactive Framer component that adds a magnifying glass effect to images. As the cursor moves across the image, a lens follows the mouse and reveals a zoomed-in version of the image inside it.
You can control the zoom level, lens size, shape, border style, and whether the lens appears only on hover or stays visible at all times. The component is smooth, responsive, and ideal for showcasing visual details without navigating away from the page.
Mouse-following lens zoom effect
Adjustable zoom level
Customizable lens size
Circle or square lens shape
Configurable lens border width and color
Option to show lens on hover or always visible
Smooth performance and responsive behavior
Product image previews
Portfolio and photography sites
E-commerce detail views
Image comparisons and showcases
Interactive visual storytelling
Use high-resolution images for best zoom clarity
Keep zoom levels subtle to avoid pixelation
Match lens border color to your UI for a polished look
One Mouse Lens Zoom component
Image, zoom, and lens customization controls
Hover behavior toggle
Framer designers and builders
Product designers and marketers
E-commerce creators
No-code users adding interactive image details
