What can an interactive popup card contain?

Each card can contain a title, description, image, video, category, and CTA link. Keep the short explanation in the card and send deeper material to the linked page or document.

Do popup cards open on hover or click?

You can choose the interaction mode for desktop. On touch devices, tapping a hotspot opens the card automatically because phones do not have a reliable hover state.

Can every hotspot have different card content?

Yes. Every marker has its own card, so one product image can explain separate parts, one map can describe different locations, and one floor plan can carry room-by-room details.

Can I change the card style?

Yes. Choose light, dark, or glass card styling, set the card width and text size, and use marker colors that contrast with the underlying image.

Do cards work on mobile?

Yes. Hotspots stay aligned to the image with percentage positioning, and cards reflow into tap-friendly panels that are readable without pinch-zooming.

Can a popup card include a call to action?

Yes. Add a button that links to a product page, booking flow, PDF, support article, or any other destination.

Are popup cards accessible?

Markers are keyboard reachable and carry labels. Visitors can open a card with Enter or Space and dismiss it with Escape, while the card content remains real text for assistive technology.

Popup cards

Give every hotspot a card people can understand.

Add the right amount of context to the exact part of an image or map a visitor is exploring — without sending them to a separate page for every detail.

Create popup cards Try the image maker

Free forever plan · No credit card · Works in Wix, Webflow, WordPress, Shopify, Squarespace

Context in place

Explain a feature, room, or location right beside the marker instead of making visitors hunt for a legend.

Media when it helps

Add an image, video, or short link when words alone are not enough to explain the detail.

Cards that adapt

Choose light, dark, or glass styling and let the card become a full-width panel on small screens.

What you get

Title and description for every hotspot
Optional image or video inside the card
CTA buttons for products, docs, and bookings
Light, dark, and glass card themes
Hover, click, focus, and touch behavior
Percentage positioning that stays aligned on mobile

A card should answer the next question

A good popup is not a second landing page. It answers the question that appears when someone notices a specific part of the visual: What is this? Why does it matter? What should I do next?

Name the detail

Use a short, specific title that makes sense out of context.

Add the useful detail

Write one or two sentences that explain the visible thing.

Show it when needed

Use a supporting image or video for anything visual or procedural.

Offer a next step

Link to specs, a booking page, a product, or a deeper guide.

See the card behavior

Interactive product diagram example

The markers in this example are real focusable controls. Hover or focus one to preview its card, then use the same pattern for product diagrams, floor plans, venue maps, or shoppable photography.

Popup, map view, or lightbox?

Choose the action based on how much information belongs behind the hotspot. Popup cards are best for quick context. Map views are useful when a point needs geography or directions. Lightboxes give a detail its own focused space with more room for media.

Action	Best for	Typical content
Popup card	Fast explanations	Title, short copy, CTA
Map view	Places and directions	Location, map, address, link
Lightbox	Focused detail	Large image, video, longer copy

Cards that work on phones

On desktop, a popup can sit beside the marker and stay lightweight. On a phone, the same card becomes a larger tap-friendly surface so descriptions, media, and buttons remain readable. Because the marker is stored as a percentage of the image, it does not drift as the layout changes.

Interactive image on a phone where a tapped hotspot opens an info card with a thumbnail and a Learn more button — On phones, hotspots become tap targets and the popup opens as a full-width card.

Build the visual once, keep the cards current

Publish one iframe into Wix, Webflow, WordPress, Shopify, Squarespace, or custom HTML. When a title, card image, link, or description changes in the builder, the published experience updates everywhere it is embedded. Start with the interactive image maker or explore the companion lightbox experience.

Continue exploring

Turn any image into a guided experience.

Free forever plan. Paste one iframe into your site and ship.

Create your interactive image