Markers pinned to a picture in percentages, so they stay on their subject at any
width. Each marker is a real button carrying aria-expanded; its popover
is reachable with Tab, flips itself away from the window edge, and closes
on Esc.
Turn on Edit mode in the panel — or add ?edit=1 to the URL — and
the same widget becomes a placement tool: click the picture to drop a marker, drag to
move it, nudge with the arrow keys, fill in the fields, then copy the JSON straight
into your page. Work autosaves to this browser. Press H to hide the panel.
A soft dot with a ring breathing out of it. Hover or focus opens the card; the ring stops dead under a reduced-motion setting. Best over photography, where a hard marker would fight the picture.
The retail pattern: a filled plus that turns into a cross when its card is open, a thumbnail crop of the subject, a price line and a link. Cards flip inward near the edges of the window rather than running off it.
Numbered markers on a cutaway, opening on click so a reader can park a callout open and read it. Numbers renumber themselves when a marker is added or removed in the editor.