Labeled Image

Add clickable hotspots to an image that trigger an assigned element to pop up.

Lewis Bowen avatar
Written by Lewis Bowen
Updated over a week ago

Utilizing labeled images on your website provides an engaging way to present information and enhance user experience. By incorporating interactive elements such as pop-up overlays and hotspots, labeled images allow you to offer additional details about e.g. your products. This not only makes your content more informative but also encourages user interaction, leading to increased engagement and potentially higher conversion rates.

Adding a Labeled image in Vev

Setting up a labeled image

Adding a Hotspot Marker

  • Double-click the labeled image component on your canvas

  • Click Add Item to create a new Hotspot

  • Adjust the X and Y fields (in %, so max. 100%) to position the hotspot where desired (you may need to adjust through trial and error).

Adding a Caption on Hover

Adding a caption to the hotspot marker gives users an idea of what to expect if they were to open that hotspot. Follow the steps below to add it.

  • Double-click the Labeled Image element

  • Click the Caption on hover field

  • Write your caption (A good caption is short and concise)

A caption will only be visible when the cursor hovers over the Hotspot.

Create Pop-up as Overlay

  • Double-click the Labeled image component

  • Under Widget, select the component from your project that should be shown as a pop-up when the hotspot is clicked.

  • Once a widget is assigned to a hotspot, it will automatically become hidden upon entering preview mode. Clicking the appropriate hotspot will bring its assigned widget into view.

Styling a labeled image

Note: If you feel that the Labeled image doesn't offer enough customization options, we recommend using the Interactions component instead.

It will enable you to unleash your creativity and tailor it to your specific needs.

  • Background:

    • Point: Change the background color's hotspot

    • Hover Text Box: Change the Caption on hover's background color

    • Overlay: Change the overlay's background color (window appearing when clicking the hotspot)

  • Text:

    • PO: Change the size of the + icon inside the hotspot

    • HO: Style the text Caption on hover's text

    • CL: Change the size of the overlay's close button

  • Padding: Add padding to both the Hover text box and the Close button

  • Border: Set a border color, opacity, and line weight for both the Hotspot and Hover text box

  • Border Radius: Curve the radius of the border for both the Hotspot and Hover text box

  • Transform: Change the Hotspot's width and height

  • Icons:

    • Set custom shape: Replace the preset icons with a shape or a custom SVG

    • Set custom image: Replace the preset icons logo with an image

Configuration Options

Once you've added the Labeled Image element or section to your canvas, you can now deep-dive into the configuration options and set your label points.
To start, double-click the Labeled image element or section to open the configuration options.



Background Image

The image to go in the background of the section, over which the hotspots will be placed.


x(-axis): The hotspot marker's position from the left edge of the section, measured in percentage units.

y(-axis): The hotspot marker's position from the top edge of the section, measured in percentage units.

Caption on hover

A small blurb of text that appears beneath the marker when the user hovers over that marker.

Multiline caption?

Allows you to add an extra line to the caption on hover and set the textboxes' width in pixels.


The name of the widget that should pop up when the user clicks on the hotspot marker. (Has to be previously named in the layers panel)

Show Animation

The animation used to bring the popup into view.

Hide Animation

The animation used to hide the popup from the view.


The animation speed style used for the popup show and hide animations.


Length of time over which the popup show and hide animation plays.

Did this answer your question?