Image Zoom on mouse hover

image-zoom-on-mouse-hover.markdown

Image Zoom on mouse hover

A Pen by swarad07 on CodePen.

License.

index.html

<div class="container">
  <div class="product-img--main" data-scale="1" data-image="https://picsum.photos/1200/1200">
  </div>
  <div class="product-img--main" data-scale="1.2" data-image="  https://picsum.photos/1200/1200">
  </div>  
  <div class="product-img--main" data-scale="1.6" data-image="https://picsum.photos/1200/1200">
  </div>
  <div class="product-img--main" data-scale="2" data-image="https://picsum.photos/1200/1200">
  </div>  
  <div class="product-img--main" data-scale="2.2" data-image="https://picsum.photos/1200/1200">
  </div>  

script.js

$('.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('<div class="product-img--main__image"></div>')
            // 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') +')'});
        });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

style.css

.product-img--main {
   position: relative;
  overflow: hidden;
  /* margin-bottom: 30px; */
  width: 600px;
  height: 600px;
  float: left;
  margin: 10px;
}

.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;
}