HoverLens

Hover Lens adds a smooth, cursor-based zoom effect to images in your Framer projects, creating a high-end, interactive experience—perfect for product displays, ecommerce, portfolios, and galleries.

Interactive Zoom on Hover

• Precision-based zoom: Follows the cursor to dynamically magnify image details where the user focuses.

• Smooth animation: Built with Framer Motion, offering fine-tuned easing and animation timing.

• Elegant reset: The image scales back to its original size seamlessly upon hover leave.

• Fully responsive: Adapts to all screen sizes and maintains consistent behavior.

Complete Customization Controls

• Hover Lens gives creators flexible controls to tailor the effect to their exact design needs:

• Image upload: Use any image, with automatic responsive handling.

• Zoom factor: Adjustable from subtle (1.5×) to dramatic (up to 5×) zoom levels.

• Transition duration: Fine-tune animation speed and easing curve.

How It Works

Using Framer and real-time cursor tracking, Hover Lens dynamically updates the transform-origin based on hover position. This creates a natural and immersive zoom that feels intuitive and refined—ideal for emphasizing image-rich content with subtle interactivity.