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.
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.
Visuals and InteractionYou 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 HighlightsMake 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 ModalsEvery 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.
Product feature showcases
Interactive maps and floorplans
Educational diagrams and anatomy
Complex infographics
Interactive portfolios or gallery pieces
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.
Questions or feedback? Reach me anytime: dulajdilshan766@gmail.com or on X @Dulajweb
Dulaj dilshan
