Cartzilla component

# Hotspots

Create an image with interactive hotspots that show hidden description on click or hover.

    <!-- Hotspots made of buttons and popovers -->
    <!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
    <div class="ratio" id="hotspots" style="--cz-aspect-ratio: calc(500 / 526 * 100%)">

      <!-- Hotspot button -->
      <a class="btn btn-icon btn-sm btn-light rounded-circle shadow position-absolute z-2" href="#!" style="top: 63.4%; left: 75.8%" data-bs-toggle="popover" data-bs-html="true" data-bs-trigger="focus" data-bs-placement="top" data-bs-custom-class="popover-sm" data-bs-content='
        &lt;div class="d-flex align-items-start position-relative"&gt;
          &lt;img src="assets/img/home/furniture/gallery/hotspot01.png" width="64" alt="Image"&gt;
          &lt;div class="nav flex-column pt-2 ps-2 ms-1"&gt;
            &lt;a class="nav-link hover-effect-underline stretched-link p-0 mb-2" href="#"&gt;Indigo coushy low sofa&lt;/a&gt;
            &lt;div class="h6 mb-0"&gt;$856.00&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      ' tabindex="1" aria-label="Hotspot">
        <i class="ci-plus fs-sm"></i>
      </a>

      <!-- Hotspot button -->
      <a class="btn btn-icon btn-sm btn-light rounded-circle shadow position-absolute z-2" href="#!" style="top: 60.2%; left: 15.7%" data-bs-toggle="popover" data-bs-html="true" data-bs-trigger="focus" data-bs-placement="bottom" data-bs-custom-class="popover-sm" data-bs-content='
        &lt;div class="d-flex align-items-start position-relative"&gt;
          &lt;img src="assets/img/home/furniture/gallery/hotspot02.png" width="64" alt="Image"&gt;
          &lt;div class="nav flex-column pt-2 ps-2 ms-1"&gt;
            &lt;a class="nav-link hover-effect-underline stretched-link p-0 mb-2" href="#"&gt;Ergonomic beige armchair&lt;/a&gt;
            &lt;div class="h6 mb-0"&gt;$235.00&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      ' tabindex="1" aria-label="Hotspot">
        <i class="ci-plus fs-sm"></i>
      </a>

      <!-- Hotspot button -->
      <a class="btn btn-icon btn-sm btn-light rounded-circle shadow position-absolute z-2 start-50 translate-middle-x" href="#!" style="top: 25.8%" data-bs-toggle="popover" data-bs-html="true" data-bs-trigger="focus" data-bs-placement="top" data-bs-custom-class="popover-sm" data-bs-content='
        &lt;div class="d-flex align-items-start position-relative"&gt;
          &lt;img src="assets/img/home/furniture/gallery/hotspot03.png" width="64" alt="Image"&gt;
          &lt;div class="nav flex-column pt-2 ps-2 ms-1"&gt;
            &lt;a class="nav-link hover-effect-underline stretched-link p-0 mb-2" href="#"&gt;Waves modern painting&lt;/a&gt;
            &lt;div class="h6 mb-0"&gt;$74.99&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      ' tabindex="1" aria-label="Hotspot">
        <i class="ci-plus fs-sm"></i>
      </a>

      <!-- Main image -->
      <img src="assets/img/home/furniture/gallery/01.jpg" class="rounded-5" alt="Image">
    </div>

Top