CMS Image on Hover

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