Hotspots

<!-- 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>