CSS & JavaScript Image Magnifier Glass

Demo:

*to see the Magnifier Glass effect on the website click here.

To create the CSS & JavaScript Image Magnifier Glass follow the steps below:

Add HTML
Add CSS
Add JavaScript

Step1.

Add HTML

Create the image container and add the image that you want to Magnifique:

<div class="image-container">
  <img id="dinant" src="https://lenadesign.org/wp-content/uploads/2021/06/image-mg.jpg" width="600" height="440">
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.image-container {
  position:relative;
}

Style the image:

#dinant {
  border: 10px solid #333;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}

And add magnifying glass:

.magnifier-glass {
  position: absolute;
  border: 5px solid #333;
  border-radius: 50%;
  cursor: none;
  width: 100px;
  height: 100px;
}

.magnifier-glass:before {
  content:"";
  position: absolute;
  width: 15px;
  height:70px;
  border-radius: 30px;
  background-color: #333;
  top:86px;
  left:90px;
  transform: rotate(-33deg);
}

Step3.

Add JavaScript

function Zoom(img, zoom) {
  var img, loupe, width, height, back;
  img = document.getElementById("dinant");

  loupe = document.createElement("div");
  loupe.setAttribute("class", "magnifier-glass");

  img.parentElement.insertBefore(loupe, img);
  loupe.style.backgroundImage = "url('" + img.src + "')";
  loupe.style.backgroundRepeat = "no-repeat";
  loupe.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
  back = 2;
  width = loupe.offsetWidth / 2;
  height = loupe.offsetHeight / 2;

  loupe.addEventListener("mousemove", moveLoupe);
  img.addEventListener("mousemove", moveLoupe);
  loupe.addEventListener("touchmove", moveLoupe);
  img.addEventListener("touchmove", moveLoupe);
  
  function moveLoupe(e) {
    var pos, x, y;

    e.preventDefault();

    pos = position(e);
    x = pos.x;
    y = pos.y;

    if (x > img.width - (width / zoom)) {x = img.width - (width / zoom);}
    if (x < width / zoom) {x = width / zoom;}
    if (y > img.height - (height / zoom)) {y = img.height - (height / zoom);}
    if (y < height / zoom) {y = height / zoom;}

    loupe.style.left = (x - width) + "px";
    loupe.style.top = (y - height) + "px";
    loupe.style.backgroundPosition = "-" + ((x * zoom) - width + back) + "px -" + ((y * zoom) - height + back) + "px";
  }
  function position(e) {
    var a, x = 0, y = 0;
    e = e || window.event;

    a = img.getBoundingClientRect();
    x = e.pageX - a.left;
    y = e.pageY - a.top;

    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
}

Zoom("dinant", 2);

Enjoy coding!

Share this: