zoom

zoom.js

$(document).on('mousemove', '.zoom', function (e){
  var rect = e.target.getBoundingClientRect(),
    offsetX = e.clientX - rect.left,
    offsetY = e.clientY - rect.top;
  x = offsetX/this.offsetWidth*100
  y = offsetY/this.offsetHeight*100
  this.style.backgroundPosition = x + '% ' + y + '%';
})

$(document).on('mouseenter', '.zoom', function (e){
  this.style.backgroundImage = 'url(' + $(this).find('img').attr('src') + ')';
})

$(document).on('mouseleave', '.zoom', function (e){
  this.style.backgroundImage = '';
})

zoom.scss

.zoom img {
  transition: opacity .5s;
  &:hover {
    opacity: 0;
  }
}