<div class="img-wrap">
  <div class="mag-wrap">
    <img src="https://i.picsum.photos/id/155/500/500.jpg?hmac=pb5YrtFe826CIq-hgqS9u6BrbzGKdpBiTy84Te-c5NY" class="mag-img" alt="" />
  </div>
  <a href="javascript:;" class="img-lk">
    <img src="https://i.picsum.photos/id/155/500/500.jpg?hmac=pb5YrtFe826CIq-hgqS9u6BrbzGKdpBiTy84Te-c5NY" class="static-img" alt="" />
  </a>
</div>

.img-wrap {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 200px auto;
  border: 1px solid #ddd;
  box-shadow: 0 0 5px #999;
  cursor: move;
}

.img-wrap .mag-wrap {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  background-color: #fff;
  box-shadow: 0 0 3px #ccc;
  overflow: hidden;
}

.img-wrap .mag-wrap.show {
  display: block;
  transform: scale(1.5);
}

.img-wrap .mag-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
}

.img-wrap .img-lk {
  display: block;
  height: 100%;
}

.img-wrap .static-img {
  height: 100%;
}

(function () {
  var oImgWrap = document.getElementsByClassName("img-wrap")[0],
    oMagWrap = document.getElementsByClassName("mag-wrap")[0],
    oMagImg = oMagWrap.getElementsByClassName("mag-img")[0],
    elemPos = getElemnetPosition(oImgWrap, oMagWrap);

  document.addEventListener("resize", function () {
    elemPos = getElemnetPosition(oImgWrap, oMagWrap);
  });

  function getElemnetPosition(oImgWrap, oMagWrap) {
    return {
      magWidth: parseFloat(getComputedStyle(oMagWrap, null)["width"]),
      magHeight: parseFloat(getComputedStyle(oMagWrap, null)["height"]),
      imgWidth: parseFloat(getComputedStyle(oImgWrap, null)["width"]),
      imgHeight: parseFloat(getComputedStyle(oImgWrap, null)["height"]),
      imgX: oImgWrap.offsetLeft,
      imgY: oImgWrap.offsetTop
    };
  }

  oImgWrap.addEventListener("mouseover", function (e) {
    showMag(getXY(e).x, getXY(e).y);
    oMagWrap.className += " show";
    document.addEventListener("mousemove", mouseMove);
  });

  oImgWrap.addEventListener("mouseout", mouseOut);

  function mouseMove(e) {
    showMag(getXY(e).x, getXY(e).y, getXY(e).mouseX, getXY(e).mouseY);
  }
  function mouseOut() {
    oMagWrap.className = "mag-wrap";
    document.removeEventListener("mouseomve", mouseMove);
  }
  function getXY(e) {
    const pagePoseX =
        e.clientX + window.pageXOffset - document.documentElement.clientLeft,
      pagePoseY =
        e.clientY + window.pageYOffset - document.documentElement.clientTop;
    return {
      x: pagePoseX - elemPos.imgX - elemPos.magWidth / 2,
      y: pagePoseY - elemPos.imgY - elemPos.magHeight / 2,
      mouseX: pagePoseX - elemPos.imgX,
      mouseY: pagePoseY - elemPos.imgY
    };
  }

  function showMag(x, y, mouseX, mouseY) {
    oMagWrap.style.cssText = "left:" + x + "px;top:" + y + "px;";
    oMagImg.style.cssText = "left:" + -x + "px;top:" + -y + "px;";

    if (mouseX && mouseY) {
      if (
        mouseX < 0 ||
        mouseX > elemPos.imgWidth ||
        mouseY < 0 ||
        mouseY > elemPos.imgHeight
      ) {
        mouseOut();
      }
    }
  }
})();