Помогите сделать подобный зум

$(document).ready(function() { 
  var zoomMargin = 15; 
 
  function startZoom(e) { 
    $('.zoomer .large').css('left', $(this).width() + zoomMargin).show(); // Контейнер у большим изображением становится видимым. 
  } 
 
  function moveZoom(e) { 
    var offset = $(this).offset(), // В переменной offset хранятся координаты блока с миниатюрой 
      x = (e.pageX - offset.left), // В переменной хранится координата X курсора мыши относительно блока с миниатюрой 
      y = (e.pageY - offset.top); // Координата Y курсора мыши. 
    w = $(this).width(), // Ширина миниатюры 
      h = $(this).height(), // Высота миниатюры 
      // Позиционирование фона большого изображения относительно того, куда указывает курсор на миниатюре. 
      $('.large').css({ 
        'background-position': (x / w * 100) + '% ' + (y / h * 100) + '%' 
      }); 
  } 
 
  function endZoom(e) { 
    $('.zoomer .large').hide(); // Контейнер с большим изображением скрывается 
  } 
  $('.small').on({ 
    'mouseenter': startZoom, // При наведении мыши на миниатюру срабатывает функция startZoom 
    'mousemove': moveZoom, // Когда курсор мыши перемещается внутри миниатюры срабатывает функция moveZoom 
    'mouseleave': endZoom // Когда мышь уходит из области миниатюры срабатывает функция endZoom 
  }); 
})

.zoomer { 
  width: 300px; 
  height: 200px; 
  position: relative; 
} 
 
.zoomer .small { 
  width: 300px; 
  height: 200px; 
  background: url(https://kalushnews.city/upload/test_img/2266/questions/o_1djrf1fdu1mcmvm6ha51qv2vdjel.jpg) no-repeat; 
  background-size: cover; 
  /* Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. */ 
  position: absolute; 
} 
 
.zoomer .large { 
  background: url(https://kalushnews.city/upload/test_img/2266/questions/o_1djrf1fdu1mcmvm6ha51qv2vdjel.jpg) no-repeat; 
  position: absolute; 
  display: none; 
  width: 600px; 
  height: 400px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="zoomer"> 
  <div class="large"></div> 
  <div class="small"></div> 
</div>

addEventListener('mousemove', e => { 
  let isImg = e.target.nodeName === "IMG"; 
  if (isImg) { 
    let r = e.target.getBoundingClientRect(); 
    frame.style.top =  e.y - 50 + "px"; 
    frame.style.left = e.x - 50 + "px"; 
    preview.style.background = `url(https://picsum.photos/id/85/900/900) no-repeat`; 
    preview.style.backgroundPosition = `${150-(e.x-r.x)*3}px ${150-(e.y-r.y)*3}px` 
  }  
  preview.style.display = frame.style.display = isImg ? 'inline-block' : 'none'; 
})

#frame { 
  width: 100px; 
  height: 100px; 
  position: fixed; 
  background: #0002; 
  pointer-events: none; 
  display: none; 
} 
 
#preview { 
  width: 300px; 
  height: 300px; 
  display: none; 
}

<img src="https://picsum.photos/id/85/300/300" /> 
<div id="preview"></div> 
<div id="frame"></div>