Flexa Block Pro

The Image Hotspot Block: Point At What Matters In A Picture

Put markers straight onto a photo, a diagram or a floor plan, and let each one open a small panel with its own title, description and link — on hover at a desk, on a tap on a phone.

Part of Flexa Block Pro

The picture already explains it — the labels are the problem

On a client site, one image often carries a whole section — a product shot, a floor plan, a diagram of the service. The labels have to go somewhere. A caption underneath loses the link to the part it names; a list beside it makes the reader count back and forth. So the text gets baked into the picture — and six weeks later a part is renamed and the file has to be redrawn.

The Image Hotspot block keeps the labels on the picture. You drop markers where they belong, write a title and a short description for each, and the visitor opens them one at a time — while the image stays a normal image and the words stay editable text.

Pulsing round markers, opening on hover. Move the pointer onto a marker and its panel appears; on a touch screen the same marker opens on a tap.

A wide photograph used to demonstrate hotspot markers
Anywhere on the frameA marker is stored as a percentage across and down, so it stays on the same spot when the image is scaled.
A title and a descriptionThe description takes inline bold and italic, so a name or a measurement can stand out.
An optional linkAdd a URL and the panel gains a link, for when the detail deserves a whole page.Learn more

What you get to decide

Place each marker by percentage across and down — it holds its spot at any screen width.
Choose whether a panel opens on hover or on a click — and touch visitors always get tap-to-open, because a finger cannot hover.
Pick the marker: a circle, a square or a map-style pin, in your colour, carrying an icon — or numbered, when the points are meant to be read in order.
Turn the pulse on when a marker needs noticing, off when the picture should stay calm.
Style the panel — background colour or gradient, text colour, width, radius, and which side each point opens toward.
Plus the usual spacing, colour and responsive controls, so it fits your design instead of fighting it.

Under the hood

An interactive picture is the kind of thing that looks finished in a demo and falls apart on a real site. Those cases were built in, not bolted on.

Every marker is a real button: Tab moves between them, Enter or Space opens a panel, Escape closes it.
A closed panel is hidden from screen readers and skipped by the keyboard.
A panel that would run past the edge of the picture is nudged back inside it.
The pulse stops for anyone who has asked for reduced motion, every colour has a dark-mode counterpart, and the styling is settled when you save the page.

Two more ways to set it up

Numbered pins, opening on a click, no pulse. The same block set up as a walkthrough, read in order.

A wide photograph annotated with numbered walkthrough markers
Start hereNumbering follows the order of the list in the sidebar, so reordering the steps renumbers the picture.
Then this oneWith the click trigger, one panel is open at a time and it stays open until the reader picks another.
And thisThe pin shape points down at the exact spot, which suits a plan or a map.
Last stopEscape closes whatever is open, from anywhere in the picture.

Square markers on a locked 16:9 frame, panels centred. The picture is cropped to a fixed shape, so the section keeps its height whichever image lands there.

A photograph cropped to a locked sixteen-by-nine frame with two square markers on it
A pale panelThe panel background takes a colour or a gradient, so it can sit light on a dark picture or the other way round.
Its own sideEach point can open toward the top, bottom, left or right, or leave it on automatic and let the position decide.

Setting one up takes a couple of minutes. Choose the image, add a hotspot, drag the marker onto the right spot, type the title and description, repeat. You place markers on the real picture at the real size, not by guessing coordinates.

It sits in the same editor, next to the blocks you already build with, and shares their spacing and colour controls, so it lines up with the section above it. It needs Flexa Block switched on alongside it.

Let the picture do the talking

Image Hotspot is one of the blocks in Flexa Block Pro. Have a look at what else is in there.

See Flexa Block Pro
More articles

Keep reading

Other guides from the Flexa Blocks library.

48 posts found