Image Zoom

{%- comment -%}
  modblo. Image Zoom Block
  Paste into a Shopify "Custom Liquid" section via Theme Editor.
  Hover (or tap) any image in the block to magnify it under the cursor.
  Pure CSS transform + a few lines of JS to track pointer position.
{%- endcomment -%}

<style>
  .modblo-iz { background:#fff; padding:clamp(40px,6vw,72px) 0; }                 /* EDIT colors */
  .modblo-iz__inner { max-width:1100px; margin:0 auto; padding:0 24px; }
  .modblo-iz__h { font-size:clamp(22px,2.5vw,30px); letter-spacing:-.02em; margin:0 0 24px; text-align:center; color:#0b0b0c; }

  .modblo-iz__grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
  .modblo-iz__frame {
    position:relative; aspect-ratio:1; overflow:hidden;
    border-radius:16px; cursor:zoom-in;
    background:#fafafa;
    border:1px solid rgba(11,11,12,.06);
  }
  .modblo-iz__img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .25s ease;
    transform-origin:center center;
  }
  .modblo-iz__frame.is-zoomed .modblo-iz__img {
    transform:scale(2.4);                                                     /* EDIT zoom strength */
    transition:none;
  }
  .modblo-iz__frame.is-zoomed { cursor:zoom-out; }

  .modblo-iz__hint {
    position:absolute; bottom:10px; left:10px;
    background:rgba(0,0,0,.6); color:#fff;
    padding:4px 8px; border-radius:6px;
    font-size:10px; font-weight:600;
    text-transform:uppercase; letter-spacing:.08em;
    opacity:0; transition:opacity .2s;
    pointer-events:none;
  }
  .modblo-iz__frame:hover .modblo-iz__hint { opacity:1; }
  .modblo-iz__frame.is-zoomed .modblo-iz__hint { opacity:0; }

  .modblo-iz__cap { font-size:13px; opacity:.65; margin:10px 0 0; text-align:center; color:#0b0b0c; }
</style>

<section class="modblo-iz">
  <div class="modblo-iz__inner">
    <h2 class="modblo-iz__h">Detail close-ups</h2>                                {%- comment -%} EDIT heading or remove {%- endcomment -%}

    <div class="modblo-iz__grid">
      {%- comment -%} EDIT each image: replace src with your asset URL {%- endcomment -%}
      <figure>
        <div class="modblo-iz__frame" data-modblo-iz>
          <img class="modblo-iz__img" src="https://images.unsplash.com/photo-1512436991641-6745cdb1723f?w=800" alt="" width="800" height="800" loading="lazy">
          <span class="modblo-iz__hint">Hover to zoom</span>
        </div>
        <figcaption class="modblo-iz__cap">Heritage knit detail</figcaption>
      </figure>

      <figure>
        <div class="modblo-iz__frame" data-modblo-iz>
          <img class="modblo-iz__img" src="https://images.unsplash.com/photo-1542838132-92c53300491e?w=800" alt="" width="800" height="800" loading="lazy">
          <span class="modblo-iz__hint">Hover to zoom</span>
        </div>
        <figcaption class="modblo-iz__cap">Stitch close-up</figcaption>
      </figure>

      <figure>
        <div class="modblo-iz__frame" data-modblo-iz>
          <img class="modblo-iz__img" src="https://images.unsplash.com/photo-1556905055-8f358a7a47b2?w=800" alt="" width="800" height="800" loading="lazy">
          <span class="modblo-iz__hint">Hover to zoom</span>
        </div>
        <figcaption class="modblo-iz__cap">Color detail</figcaption>
      </figure>
    </div>
  </div>
</section>

<script>
  (function () {
    document.querySelectorAll('[data-modblo-iz]').forEach(function (frame) {
      var img = frame.querySelector('.modblo-iz__img');
      if (!img) return;
      var supportsHover = window.matchMedia('(hover: hover)').matches;

      function setOriginFromEvent(e) {
        var rect = frame.getBoundingClientRect();
        var x = ((e.clientX - rect.left) / rect.width) * 100;
        var y = ((e.clientY - rect.top) / rect.height) * 100;
        img.style.transformOrigin = x + '% ' + y + '%';
      }

      if (supportsHover) {
        frame.addEventListener('mouseenter', function () {
          frame.classList.add('is-zoomed');
        });
        frame.addEventListener('mousemove', setOriginFromEvent);
        frame.addEventListener('mouseleave', function () {
          frame.classList.remove('is-zoomed');
          img.style.transformOrigin = 'center center';
        });
      } else {
        // Touch: tap toggles zoom, second tap or tap-elsewhere unzooms
        frame.addEventListener('click', function (e) {
          if (frame.classList.contains('is-zoomed')) {
            frame.classList.remove('is-zoomed');
            img.style.transformOrigin = 'center center';
          } else {
            setOriginFromEvent({ clientX: e.clientX, clientY: e.clientY });
            frame.classList.add('is-zoomed');
          }
        });
      }
    });
  })();
</script>