Magnifying Effect on Image | Efecto de aumento en la imagen con CSS

Magnifying Effect on Image with CSS & JS| Efecto de aumento en la imagen con CSS y JS.

DEMO

<img id="main-img" height="750" src="https://data.whicdn.com/images/343552016/original.jpg"/>
<div id="zoom">
 <img id="zoom-img" />
</div>

body{overflow:hidden;margin:0;background:#222}
#main-img{display:block;margin:20px auto;border:1px solid rgba(255,255,255,.2);-webkit-filter:grayscale(0);filter:grayscale(0)}
#zoom-img{pointer-events:none;position:relative;top:50%;left:50%}
#zoom{position:absolute;width:250px;height:250px;box-shadow:0 0 0 2px rgba(255,0,0,.5),5px 5px 10px 5px rgba(0,0,0,.2);border-radius:50%;top:0;left:0;overflow:hidden;pointer-events:none;visibility:hidden;opacity:0}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>

var zoom    = document.querySelector("#zoom");
var zoomImg = document.querySelector("#zoom-img");
var mainImg = document.querySelector("#main-img");
var enterTL = new TimelineMax({ paused: true });
var timer   = TweenLite.delayedCall(1, () => enterTL.reverse()).pause();

var cx, cy, ratio;

window.addEventListener("load", init);

function init() {
  
  zoomImg.src = mainImg.src;
  ratio = mainImg.naturalWidth / mainImg.width;
  resize();
  
  TweenLite.set([zoom, zoomImg], { xPercent: -50, yPercent: -50 });
  TweenLite.set(zoom, { autoAlpha: 0, scale: 0 });
  
  enterTL
    .to(mainImg, 0.5, { filter: "grayscale(1)", "-webkit-filter": "grayscale(1)" }, 0)
    .to(zoom, 0.5, { autoAlpha: 1, scale: 1 }, 0)
    
  window.addEventListener("resize", resize);  
  mainImg.addEventListener("mouseleave", leaveAction);
  mainImg.addEventListener("mousemove", moveAction);
}

function leaveAction() {
  enterTL.reverse();
}

function moveAction(e) {
  enterTL.play();
  timer.restart(true);
  TweenLite.set(zoom, { x: e.x, y: e.y });
  TweenLite.set(zoomImg, { x: (cx - e.x) * ratio, y: (cy - e.y) * ratio }); 
}

function resize() { 
  var rect = mainImg.getBoundingClientRect();
  cx = rect.left + rect.width  / 2;
  cy = rect.top  + rect.height / 2;
}