<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;
  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 imgWrap = $(".img-wrap"),
    magWrap = $(".mag-wrap"),
    magImg = $(".mag-img"),
    imgX = imgWrap.offset().left,
    imgY = imgWrap.offset().top;

  imgWrap
    .on("mouseover", function (e) {
      var e = e || window.event;
      var x = e.clientX - imgX - magWrap.innerWidth() / 2;
      var y = e.clientY - imgY - magWrap.innerHeight() / 2;

      magWrap.css({
        display: "block",
        left: x + "px",
        top: y + "px"
      });

      magImg.css({
        left: -x + "px",
        top: -y + "px"
      });
    })
    .on("mousemove", function (e) {
      var e = e || window.event;
      var x = e.clientX - imgX - magWrap.innerWidth() / 2;
      var y = e.clientY - imgY - magWrap.innerHeight() / 2;
      var mousePosX = e.clientX - imgX;
      var mousePosY = e.clientY - imgY;

      magWrap.css({
        display: "block",
        left: x + "px",
        top: y + "px"
      });

      magImg.css({
        left: -x + "px",
        top: -y + "px"
      });

      if (
        mousePosX < 0 ||
        mousePosX > imgWrap.innerWidth() ||
        mousePosY < 0 ||
        mousePosY > imgWrap.innerHeight()
      ) {
        magWrap.css("display", "none");
      }
    })
    .on("mouseOut", function (e) {
      magWrap.css("display", "none");
    });
})();