Search blocks by description or jump to a page.
A product image dotted with clickable hotspots that reveal each feature in place. Perfect for showing exactly where a capability lives on the item.
Image Hotspot Features splits into two columns. The left column holds a square product image with five circular hotspot buttons pinned at exact coordinates over it. Hovering any button scales it up and reveals a small floating tooltip that shows the feature name and a one-line description. A hint below the image tells visitors they can hover to explore. The right column opens with a badge and a large heading, then lists three additional features as bordered card rows, each with a chevron icon, a title, and a short description. Below the cards a stacked-avatar strip carries a social proof line alongside two call-to-action buttons.
The hotspot positions, titles, and descriptions are independent data so you can remap them to any product image and any number of points. The additional feature cards, badge text, heading, body copy, avatar images, and button labels are all plain copy changes. The social proof strip can be removed without affecting the hotspot panel.
Reach for this block when you need to show precisely where a product capability lives rather than just listing it. It suits a product detail page for a physical item with distinct parts, a hardware landing page where spatial context helps buyers understand what they are purchasing, or a product analytics dashboard that wants to annotate a UI screenshot. Compared to a flat feature grid, the hotspot layout makes location part of the story, which is a meaningful advantage when the "where" matters as much as the "what."
A natural flow around it on an Ecommerce page:
Before
After
The frame works best when the product has visually distinct zones that carry their own story. A few strong fits:
Tip: keep hotspot tooltips to one short phrase and one line of supporting text so they stay readable without obscuring the image.