Turn one image into something visitors can explore. Image with hotspots places explanatory markers on important details inside a visual. It works well for products, floor plans, interiors, machinery or interfaces where several things are worth noticing within the same image.
Do not label everything. A few genuinely useful points make exploration easier. Hotspots use percentage positions within the image frame, so after replacing the image or changing its aspect ratio, check that every marker still points to the right detail.
Click the markers: only one explanation stays open at a time.
The same image and the same three points – presented four ways.
Clicking a point opens a card beside the point, beside the image or below it – good when visitors should explore the image freely.
The explanations sit in a list beside the image, so they can be read through in one go – ideal for product features and descriptions.
Shows one point at a time while the image zooms towards it – choose it when you want to guide visitors step by step.
Each point's title sits on the image as a label and turns into a list on narrow screens – good for a quick overview; only points with text open.
Pulsing dots – the card opens to the right of the image.
The timber surfaces give the space a warmer, more natural character.
1 / 3. Materials. The timber surfaces give the space a warmer, more natural character.
Numbered points, with the list of explanations to the left of the image.
The timber surfaces give the space a warmer, more natural character.
The central work area shows how a specific function can be explained directly where it appears in the image.
Warm lighting creates a separate visual layer that can be called out with its own marker.
Step through the points – the image gently zooms in on each one.
1 / 3
The timber surfaces give the space a warmer, more natural character.
Dark labels on the image; on narrow screens they become a list.
The timber surfaces give the space a warmer, more natural character.
The central work area shows how a specific function can be explained directly where it appears in the image.
Warm lighting creates a separate visual layer that can be called out with its own marker.
The image provides the shared visual context, while markers attach short explanations to specific details.
Introduce what visitors should look for or explore in the image.
Set a separate image plus ALT and TITLE text.
Choose 16:9, 4:3, 1:1 or 3:4.
Each point uses x/y percentage coordinates so it stays attached to the corresponding part of the responsive image.
Clicking a point opens a short card explaining that selected detail.
Only one hotspot explanation stays open at a time, keeping several cards from covering the image.
Image with hotspots is strongest when visitors need to understand several details within one visual.
Use it when one main image needs one connected explanation beside it.
Use it when you need several separate photographs rather than several details inside one image.
Use it when visitors should move through sequential steps rather than explore points within one image.
ONE IMAGE, SEVERAL DETAILS TO DISCOVER
A few precisely placed markers and short explanations are enough to let visitors explore the visual naturally.