ImageWithZones

Transform Static Product Photos

About Image With Zones brings static images to life by adding interactive hotspots directly within your Framer projects. It is perfect for product walkthroughs, anatomical diagrams, or detailed maps where you want to provide extra context. Just drop in your image, define your zones, and let your visitors explore with smooth zoom effects and glowing markers. What it does The component allows you to map out specific areas on any image. When a user hovers or clicks, it can trigger a zoom animation, show a glowing highlight, and display detailed information via labels or pop up modals. It handles all the transitions and positioning automatically, making it easy to create complex image maps without writing a single line of code. What you can customize Visuals and Interaction You can upload your own image and add as many custom zones as needed. Control the interaction feel by toggling the zoom effect, adjusting the zoom scale, and setting the transition speed for a perfectly smooth experience. Glow and Highlights Make your interactive areas stand out or stay subtle. You have full control over the glow color and the intensity of the glow effect to ensure the hotspots are clearly visible against any background. Labels and Modals Every text element is fully brandable. You can customize the background colors, text colors, and fonts for both the hover labels and the detailed modals. Whether you use Inter or a custom brand font, the component will adapt to your site design seamlessly. Great for Product feature showcases Interactive maps and floorplans Educational diagrams and anatomy Complex infographics Interactive portfolios or gallery pieces Share your build If you ship something cool with it, post it on X and tag me @Dulajweb , or send it over. I’d love to see what you create. Need help? Questions or feedback? Reach me anytime: dulajdilshan766@gmail.com or on X @Dulajweb

Transform Static Product Photos