Responsive Image Hotspot

A responsive image hotspot demo built with HTML, CSS, and JavaScript.

This project displays clickable product markers on a large banner image. When users hover or click a marker, a product card appears with a product image, name, and link.

On desktop, product cards can appear around each hotspot. On mobile, the active product card is displayed in the center of the image area for a cleaner and easier-to-maintain layout.

Demo Features

• Responsive image hotspot layout
• Three product markers
• Product image, name, and link support
• Desktop hover interaction
• Mobile click interaction
• Mobile-centered product card display
• Simple file structure
• Easy to customize hotspot positions

Project Structure

responsive-image-hotspot/
├── index.html
├── css/
│   └── hotspot.css
├── js/
│   └── hotspot.js
└── images/
    ├── hotspots-banner.webp
    ├── hot01.webp
    ├── hot02.webp
    └── hot03.webp

How to Use

Open index.html directly in your browser.

No build tools or dependencies are required.

Customize Hotspot Position

Each hotspot position is controlled by CSS variables in the HTML:

<div class="hotspot-item card-right" style="--x: 30%; --y: 56%;">

Change the values of --x and --y to adjust the marker position:

style="--x: 50%; --y: 45%;"

Use percentage values so the markers stay responsive when the image scales.

Customize Product Content

Each product card includes a link, image, and product name:

<a class="hotspot-card" href="https://example.com/product-01" target="_blank" rel="noopener">
  <img src="images/hot01.webp" alt="Product 01" />
  <span>Product 01</span>
</a>

You can update:

• href for the product link
• src for the product image
• alt for image accessibility
• text inside <span> for the product name

Desktop Behavior

On desktop, users can hover over a hotspot marker to display the product card.

The card direction can be controlled with these classes:

card-right
card-left
card-top

Example:

<div class="hotspot-item card-left" style="--x: 78%; --y: 50%;">

Mobile Behavior

On mobile screens, clicking a marker displays the product card centered inside the image area.

This avoids common mobile layout issues such as:

• Product cards being cut off
• Cards overflowing outside the image
• Hotspot markers covering product images
• Difficult maintenance for different screen sizes

Recommended Image Size

The demo is designed for a wide banner image.

Recommended size:

1920 × 600

You can also use another ratio, but make sure the CSS aspect-ratio matches your image size.

Example:

.hotspot-image-wrap {
  aspect-ratio: 1920 / 600;
}

Browser Support

This demo works in modern browsers including:

• Chrome
• Edge
• Firefox
• Safari

License

This project is open source and available under the MIT License.