Drop markers on any image. Click to reveal a rich card. Markers stay locked when the image scales, cards never overflow off-screen, and on mobile it becomes a clean tappable list. Fully styled from the editor.
One image. As many callouts as you need. Markers that never drift, cards that never overflow.
This is the module exactly as it ships — its default image and markers. Click a numbered dot to reveal what's in the shot. Cards flip to stay on-screen, and only one opens at a time.
A classic film camera with a fast prime lens and a leather neck strap.
A fitted black ribbed-knit top with a cross-front bodice.
A soft, slouchy everyday carry bag worn over the shoulder.
Light-wash, high-waisted straight-leg jeans.
Same numbered markers as above — but here they're blue with larger numbers. Marker color, size and the number's font size are all settings you choose per instance.
A breathable woven band over memory foam for all-day comfort.
Deep, replaceable ear cushions that seal out the world.
Play, pause, skip and summon your assistant from one tactile control.
A smooth, notched slider that holds its fit and folds flat.
This page is the demo and the manual. The two sections above are the live module; everything below explains how to build the same thing on your own page. No external docs to hunt for.
Image Hotspot Pro turns a single image into an interactive one. You upload a picture, drop markers (dots) on specific points, and each marker opens a small card with a title, description, optional image and optional button. Visitors click a marker to learn about that part of the image.
It's built for product feature callouts, "how it works" UI walkthroughs, floor plans and maps, and shop-the-look fashion shots — anything where pointing at parts of an image beats a wall of text.
From dropping the module on a page to a finished interactive image is about five minutes.
Image Hotspot Pro and drag it into any drag-and-drop area. It loads with a sample image and three markers so you can see how it works immediately.Image group and set Base image. Add alt text. Pick an Aspect ratio (or "Use image's natural ratio") so the space is reserved and the page doesn't jump while the image loads.Hotspots repeater. Each item is one marker. Set its Title and Description, and optionally a card image and a button.X and Y fields (percentages — see below). The marker moves on the preview as you type, so you can nudge it onto the exact spot.Style tab, choose a marker style, colors, tooltip look, and behavior. Everything is a field — no custom CSS.Every marker has two position fields:
0 = far left, 100 = far right.0 = top, 100 = bottom.So a marker at X = 50, Y = 50 sits dead center. A marker at X = 90, Y = 10 sits near the top-right corner.
You don't have to guess: as you change X and Y, the marker moves on the live preview in the editor, and a small coordinate badge shows the current values so you can nudge it precisely onto the feature.
Pick one style for all markers under Style → Markers:
You also control marker size, color, border, the hover color and scale, and an optional attention pulse (a soft expanding ring that signals "these are clickable" — it respects reduced-motion). Add a per-hotspot Marker label to show a number or short text inside the marker.
Want "blue = features, orange = warnings"? Define up to six categories under Categories (each is a label + color), then assign each hotspot a Category color. The marker takes that color, and you can show a legend below the image. Leave a hotspot's category blank to use the default marker color.
Every visible value is a setting — there's no custom CSS to write. The defaults also inherit your theme: the marker color pulls from your theme's primary color and the base font from your theme's body font, so it looks at home on any theme out of the box.
Style → Layout. A color layer on top of the image; raise its opacity (e.g. black at 35%) to darken a bright or white image so markers and cards stay readable. Off by default.Style → Tooltip.<button> elements: focusable, with the hotspot title as their accessible name.prefers-reduced-motion (disables the pulse and card animation).| Field | Where | What it does |
|---|---|---|
| Heading | Content | Optional eyebrow / title / subtitle above the image. |
| Base image | Content → Image | The image markers are placed on, plus alt text. |
| Aspect ratio / fit | Content → Image | Reserves space (no layout shift) and controls cropping. |
| Hotspots | Content → Hotspots | The repeater. Per marker: X, Y, title, description, image, button, label, category, pinned. |
| Categories | Content → Categories | Up to six label + color pairs for color-coding. |
| Accessibility & SEO | Content | List-below toggle, legend toggle, ImageObject schema. |
| Markers | Style → Markers | Style, size, marker & inner color, border, hover color/scale, label size, pulse, custom icon. (Marker color inherits your theme's primary color.) |
| Tooltip card | Style → Tooltip | Background, border, radius, shadow size + shadow color, fonts, button colors/padding/radius, card image ratio & fit. |
| Behavior | Style → Behavior | Trigger (click/hover), single-open, open-a-card-on-load, mobile mode, breakpoint. |
| Layout & container | Style → Layout | Max width, image radius/border, padding, section background, image backdrop, and an image overlay (darken a bright image). |
| Base font | Style | Global font every element inherits unless overridden. (Inherits your theme's body font.) |
Image Hotspot Pro is a one-time purchase, installs in seconds, and works on every HubSpot CMS theme.