Transform your website into an engaging visual experience with images that magically appear and follow your cursor movement.
🎯 This component creates an immersive hover effect where images appear at your cursor position and follow your mouse movements in real-time. It's designed to add a layer of interactivity that captures attention and enhances user engagement without disrupting the browsing experience.
🔗 CMS Integration Power:
Dynamic Content Display - Seamlessly pull images directly from your CMS collections
Contextual Previews - Show product images, portfolio pieces, or team photos linked to each CMS item
Real-time Updates - Changes in your CMS automatically reflect in hover previews
Collection-Based - Works with any Framer CMS collection (products, projects, blog posts, etc.)
Smart Data Binding - Each hover area displays its own unique CMS-stored image
✨ Key Features:
Instant Image Display - Images appear smoothly when hovering over designated areas
Cursor Following - Images track your mouse movement with fluid, natural motion
Echo Trail Effect - Optional trail of fading images creates a mesmerizing motion effect
Smart Preloading - Advanced caching ensures zero lag and instant image display
Flexible Sizing - Control image dimensions with automatic aspect ratio preservation
Cursor Hiding - Option to hide the cursor for a cleaner, more immersive effect
Performance Optimized - GPU-accelerated rendering for buttery-smooth animations
🚀 Perfect Use Cases:
E-commerce Product Grids - Show product images when hovering over product cards in your CMS collection
Portfolio Galleries - Display project screenshots linked to each portfolio CMS item
Team Directories - Reveal team member photos from your CMS on hover
Blog Post Previews - Show featured images when hovering over article titles
Real Estate Listings - Preview property images from your CMS database
Restaurant Menus - Display dish photos stored in your menu CMS collection
💡 How It Works : Add the component in absolute positioning above your individual CMS items in a CMS collection list. Bind the image URL property to your CMS image field. When users hover over each item, the corresponding CMS image appears at their cursor position and follows their movement. The component automatically handles different images for each CMS entry.🧠 Keep two setups in mind :- The component's Z-index must be higher than the item's one.- If you have animations and effects on items, set the component's Pointer Event to "None", and the Item's Pointer Event to "Auto".
🎨 Customization Options:
Adjust fade in/out animation speeds
Enable or disable the echo trail effect
Control trail length and intensity
Set custom image dimensions
Toggle cursor visibility
Maintain or override aspect ratios
📊 CMS Workflow Benefits:
No Manual Updates - Images automatically update when CMS content changes
Scalable Solution - Works with unlimited CMS items
Consistent Experience - Same hover effect across all collection items
Easy Management - Control all hover images from your CMS dashboard⚠️ Commercial use restrictions :* - Sharing with third parties who haven't bought the component on Framer Marketplace, nor on LemonSqueezy's Framer Master's account is PROHIBITED
* - Use of this component in templates, direct resell or shared link without payment is strictly PROHIBITEDRefund policy : Because this is a digital product, all sales are considered final. Once you complete your purchase, you'll get instant access to the Framer component. Since digital items can't be returned, we're not able to offer refunds, exchanges, or cancellations. Refunds are only issued in cases of duplicate charges.Please make sure to review the features and preview materials before buying. If you're unsure or have any questions, feel free to reach out — we're happy to help before you commit.
By completing your purchase, you're confirming you understand and accept these terms.
Framer Master
