Skip to content

component

HoverLens

By RedDevs

Details

Summary

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,…

Description

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.

Rank history

Daily rank per list, from the first snapshot — lower is better.

12001400144858/148/228/309/79/15
  • All · #4485