Magnifying glass effect to achieve

<style>
body{
    width: 960px;
    margin: 40px auto;
}
#small{
    width: 350px;
    height: 450px;
    border:1px solid green;
    position: absolute;
    overflow: hidden;
}
#small img{
            width: 100%;
            height: 100%;
        }
div{
    float:left;
}

#move{
  width: 100px;
  height: 100px;
  position: absolute;
  top:0px;
  left:0px;
  background-color: black;
   display: none;
  opacity:0.4;
}
#look_girl{
    position: absolute;
    left:0px;
    top:0px;
}
#big{
    border:1px solid red;
    width: 340px;
    height:340px;
    overflow: hidden;
    display: none;
    position: absolute;
}
</style>

<body>
    <div id="small">
       <img src="./images/3.jpg" />
       <p id="move"></p>
    </div>
    <div id="big">
         <img src="./images/3.jpg" id="look_girl" />
    </div>
 
</body>

<script>
   var smallObj = document.getElementById('small');
   var moveObj = document.getElementById('move');
   var bigObj  = document.getElementById('big');
   var girlObj  =  document.getElementById('look_girl');
   smallObj.onmousemove = function(eve){
       var e = eve || window.event; 
       var mouseX = e.clientX;
       var mouseY = e.clientY;
       var moveLeft = mouseX-smallObj.offsetLeft-moveObj.offsetWidth/2;
       var moveTop = mouseY - smallObj.offsetTop-moveObj.offsetHeight/2;
        if(moveLeft<0) moveLeft=0;
        var endLeft = smallObj.offsetWidth-moveObj.offsetWidth
        if(moveLeft>endLeft) moveLeft = endLeft;
        if(moveTop<0) moveTop=0;
         var endTop = smallObj.offsetHeight-moveObj.offsetHeight;
         if(moveTop>endTop) moveTop=endTop;
       moveObj.style.left = moveLeft+'px';
       moveObj.style.top = moveTop+'px';
       moveObj.style.display = 'block';
      bigObj.style.display = 'block';
      bigObj.style.left = smallObj.offsetLeft+smallObj.offsetWidth+'px';
      bigObj.style.top = smallObj.offsetTop+'px';

       var girlLeft = moveLeft/(smallObj.offsetWidth-moveObj.offsetWidth)*(bigObj.offsetWidth-girlObj.offsetWidth);
       var girlTop = moveTop/(smallObj.offsetHeight-moveObj.offsetHeight)*(bigObj.offsetHeight-girlObj.offsetHeight);
           console.log(girlLeft,girlTop);
        girlObj.style.top = girlTop+'px';
        girlObj.style.left = girlLeft+'px';

     
       
  }
    smallObj.onmouseleave = function(){
         moveObj.style.display = 'none';
         bigObj.style.display = 'none';
    }


 
</script>

Ideas:

Magnifying glass effect to achieve

Guess you like