Product Image Magnify Lens — Free HTML CSS JS Amazon-Style Zoom Snippet

<div class="magnify-wrap">
  <div class="image-panel" id="imagePanel">
    <div class="product-image" id="productImage"></div>
    <div class="lens" id="lens"></div>
  </div>
  <div class="zoom-panel" id="zoomPanel">
    <p class="zoom-hint">Hover the image to zoom</p>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; padding: 24px; display: flex; align-items: center; flex-direction: column; gap: 20px; justify-content: center; min-height: 100vh; }

.magnify-wrap { display: flex; gap: 16px; max-width: 620px; flex-wrap: wrap; }

.image-panel {
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 12px;
  overflow: hidden;
  cursor: crosshair;
  border: 1px solid #e2e8f0;
}

.product-image {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #6366f1 0 20px, #818cf8 20px 40px, #a855f7 40px 60px, #c084fc 60px 80px);
  background-size: 400px 400px;
}

.lens {
  position: absolute;
  width: 90px;
  height: 90px;
  border: 2px solid #fff;
  background: rgba(255,255,255,0.25);
  box-shadow: 0 0 0 1px rgba(15,23,42,0.2);
  border-radius: 8px;
  pointer-events: none;
  display: none;
}

.zoom-panel {
  width: 260px;
  height: 260px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zoom-hint { font-size: 12px; color: #94a3b8; padding: 20px; text-align: center; }

.zoom-panel.zoomed { background-repeat: no-repeat; }

const imagePanel = document.getElementById('imagePanel');
const productImage = document.getElementById('productImage');
const lens = document.getElementById('lens');
const zoomPanel = document.getElementById('zoomPanel');

const ZOOM_FACTOR = 2.5;

imagePanel.addEventListener('mouseenter', () => {
  lens.style.display = 'block';
  zoomPanel.classList.add('zoomed');
  zoomPanel.innerHTML = '';
});

imagePanel.addEventListener('mouseleave', () => {
  lens.style.display = 'none';
  zoomPanel.classList.remove('zoomed');
  zoomPanel.style.backgroundImage = '';
  zoomPanel.innerHTML = '<p class="zoom-hint">Hover the image to zoom</p>';
});

imagePanel.addEventListener('mousemove', (e) => {
  const rect = imagePanel.getBoundingClientRect();
  const lensSize = lens.offsetWidth;

  let x = e.clientX - rect.left - lensSize / 2;
  let y = e.clientY - rect.top - lensSize / 2;

  x = Math.max(0, Math.min(x, rect.width - lensSize));
  y = Math.max(0, Math.min(y, rect.height - lensSize));

  lens.style.left = x + 'px';
  lens.style.top = y + 'px';

  const bgStyle = getComputedStyle(productImage);
  zoomPanel.style.backgroundImage = bgStyle.backgroundImage;
  zoomPanel.style.backgroundSize = (rect.width * ZOOM_FACTOR) + 'px ' + (rect.height * ZOOM_FACTOR) + 'px';
  zoomPanel.style.backgroundPosition = '-' + (x * ZOOM_FACTOR) + 'px -' + (y * ZOOM_FACTOR) + 'px';
});