将鼠标悬停在小图像上，将PanZoom放大到大图像

Question

我正在尝试通过jQuery来实现。

我想创建一个在页面上显示2张图片的函数。

<div class="big-img">
<img src="/big.jpg" />
</div>

<div class="small-img">
<img src="/small.jpg" />
</div>

<script>
  $('.small-img')
.on('mousemove', function(e){
  $('.big-img').css({'transform-origin': ((e.pageX - $('.small-img').offset().left) / $('.big-img').width()) * 100 + '% ' + ((e.pageY - $('.big-img').offset().top) / $('.big-img').height()) * 100 +'%'});
})
</script>

请注意，当您将鼠标悬停在小图像上时，它将自动移动大图像（真正的大图像会溢出屏幕）。

我想要的示例：https://codepen.io/anon/pen/bQgPOR

但我不希望只有1张图片，而是要有2张图片，一小一大