问如何在不使用大小图像/单个图像的情况下使用电梯缩放将图像悬停缩放

EN

<div class="thumb-holder">
  <img class="thumbnail" src="https://www.guthriegreen.com/sites/default/files/Kung-Fu-Panda-6%5B1%5D.jpg">
</div>

.thumb-holder{
  border:4px solid #ff07ee;
  padding:0;
  width:400px;
  height:auto;
  position:relative;
  margin:15% auto;
  display: block;
  overflow: hidden;
  .thumbnail{
    float:left;
     width:100%;
    height:auto;
  }
}
.thumb-zoom{
  position: absolute;
  background-repeat:no-repeat;
  width:100px;
  height:100px;
  border-radius:100%;
  box-shadow:inset 0 0 10px rgba(0,0,0,0.5);
  border:4px solid #141414;
  top:0;
  overflow: hidden;
  cursor:none;
  #zoom-img{
    width:500px;
    height:auto;
    position: absolute;
  }
}

$(".thumb-holder").append('<div class="thumb-zoom"></div>')

$( ".thumb-holder" ).mousemove(function(event) {

    var offset =  $(this).offset();
    var zoomX = event.pageX - offset.left - 50 ;
    var zoomY = event.pageY - offset.top  - 50;



    $('.thumb-zoom').css({
     'left' :zoomX,
     'top': zoomY, 
   })

     var position =  $( ".thumb-zoom" ).position();
     var image = $(".thumbnail").attr('src');

   $('.thumb-zoom').html('<img id="zoom-img" src="'+ image +'" >');

     $("#zoom-img").css({
       'left' : -zoomX - 50 ,
       'top': -zoomY - 50, 
     })

});