Magnify And Zoom Images Using JavaScript And CSS3

Preview:

Description:

A tiny script that applies a magnifying glass effect to an image and allows the user to zoom in/out the image with mouse wheel.

How to use it:

Insert the thumbnail and original image to the page.

<div class="image">
  <a href="original.jpg" target="_blank">
    <img src="thumbnail.jpg" alt="">
  </a>
</div>

Create the HTML for the magnifying glass effect.

<div class="zoom">
  <img class="zoom-image" src="" alt="">
</div>

The required CSS/CSS3 styles for the magnifying glass effect.

.image {
  max-width: 100%;
  cursor: none;
}
.image a {
  cursor: none;
}
.image img {
  max-width: 100%;
}
.zoom {
  width: 14rem;
  height: 14rem;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
  transition: opacity 0s linear .25s, -webkit-transform .25s ease;
  transition: transform .25s ease, opacity 0s linear .25s;
  transition: transform .25s ease, opacity 0s linear .25s, -webkit-transform .25s ease;
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  overflow: hidden;
}
.zoom.show {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
  transition: opacity 0s linear, -webkit-transform .25s ease;
  transition: transform .25s ease, opacity 0s linear;
  transition: transform .25s ease, opacity 0s linear, -webkit-transform .25s ease;
}
.zoom .zoom-image {
  position: absolute;
  left: 0;
  top: 0;
}

The script to enable the Magnify And Zoom functionalities on the image.

const image = document.querySelectorAll('.image')[0];
const zoom = document.querySelectorAll('.zoom')[0];
const zoomImage = document.querySelectorAll('.zoom-image')[0];
let clearSrc;
let zoomLevel = 1;
image.addEventListener('mouseover', function () {
  zoom.classList.add('show');
  clearTimeout(clearSrc);
  let originalImage = this.getElementsByTagName('a')[0].getAttribute('href');
  zoomImage.setAttribute('src', originalImage);
});
image.addEventListener('mouseout', function () {
  // remove scaling to prevent non-transition 
  zoom.style.transform = null;
  zoomLevel = 1;
  zoom.classList.remove('show');
  clearSrc = setTimeout(() => {
    zoomImage.setAttribute('src', '');
  }, 250);
});
image.addEventListener('mousemove', function (e) {
  let posX = e.clientX,
  posY = e.clientY;
  zoom.style.top = `${posY - zoom.offsetHeight / 2}px`;
  zoom.style.left = `${posX - zoom.offsetWidth / 2}px`;
  let percX = (posX - this.offsetLeft) / this.offsetWidth,
  percY = (posY - this.offsetTop) / this.offsetHeight;
  let zoomLeft = -percX * zoomImage.offsetWidth + zoom.offsetWidth / 2,
  zoomTop = -percY * zoomImage.offsetHeight + zoom.offsetHeight / 2;
  zoomImage.style.left = `${zoomLeft}px`;
  zoomImage.style.top = `${zoomTop}px`;
});

image.addEventListener('wheel', e => {
  e.deltaY > 0 ? zoomLevel-- : zoomLevel++;
  if (zoomLevel < 1) zoomLevel = 1;
  if (zoomLevel > 5) zoomLevel = 5;
  console.log(`zoom level: ${zoomLevel}`);
  zoom.style.transform = `scale(${zoomLevel})`;
});