Coder Wrap provides free to use snippets

.zoom-group {
  max-width: 1200px; 
  width: 100%; 
  margin: auto;
}
.product-img--main {
  position: relative;
  overflow: hidden;
  width: 48%;
  height: 400px;
  float: left;
  margin: 1%;
}
.product-img--main img {
  max-width: 100%;
}
.product-img--main__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: -webkit-transform .5s ease-out;
    transition: -webkit-transform .5s ease-out;
    transition: transform .5s ease-out;
    transition: transform .5s ease-out,-webkit-transform .5s ease-out;
}

 $('.product-img--main')
    // tile mouse actions
    .on('mouseover', function(){
      $(this).children('.product-img--main__image').css({'transform': 'scale('+ $(this).attr('data-scale') +')'});
    })
    .on('mouseout', function(){
      $(this).children('.product-img--main__image').css({'transform': 'scale(1)'});
    })
    .on('mousemove', function(e){
      $(this).children('.product-img--main__image').css({'transform-origin': ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 +'%'});
    })
    // tiles set up
    .each(function(){
      $(this)
        // add a image container
        .append('
')
        // set up a background image for each tile based on data-image attribute
        .children('.product-img--main__image').css({'background-image': 'url('+ $(this).attr('data-image') +')'});
    });