Image Hotspots Pro

Turn any image into an interactive story with Image Hotspots Pro — a production-ready Framer component for products, interiors, property features, portfolios, diagrams, and visual guides.

Add up to 30 hotspots and position each one precisely with X and Y controls. Every hotspot can include a label, title, description, highlighted price or detail, button text, and optional URL.

KEY FEATURES

• Up to 30 customizable hotspots

• Click and hover interaction modes

• Touch devices automatically use click

• Optional initially opened hotspot

• Numbered markers or minimal plus icons

• Adjustable pulse effect

• Previous and next card navigation

• Automatic or manual card placement

• Smart positioning keeps cards visible

• Responsive mobile bottom-card layout

• Image-based or frame-based coordinates

• Fill Frame, Custom Ratio, and Image Ratio sizing

• Cover and Contain image fit

• Adjustable image focal position

• Custom mobile breakpoint

• Custom marker size, colors, and borders

• Adjustable card width, height, gap, and radius

• Custom card, text, accent, and button colors

• Title and body typography controls

• Optional close button and new-tab links

• Lazy and Eager image loading

• Alternative text and accessible name

• Full keyboard navigation

• No external packages required

Use Image coordinates to keep hotspots attached to parts of the photo during resizing and cropping. Choose Frame coordinates when positions should follow the component frame.

Desktop cards automatically flip or shift to remain visible. On narrow layouts, details appear in a clean, scrollable bottom card for phones and tablets.

Keyboard users can open markers with Enter or Space, navigate with arrow keys, jump with Home and End, and close cards with Escape. Focus styling and accessible labels are included.

Everything is controlled from Framer’s property panel. Replace the demo image, add hotspots, customize the design, and publish an interactive visual experience without editing code.