How To Image Zoom When Your Mouse Moving

You can zoom any image in your HTML website using this code. I think using this feature will make your template look more attractive. You can customize it as you wish.

So Let’s Go…

HTML

<div class="zoom-image-area">
     <div class="container">
           <div class="product-img-main" data-scale="1.7" data-image="assets/images/shop/shop-img-10.webp"></div>
    </div>
</div>

 CSS

.product-img-main {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 640px;
        float: left;
        margin-bottom: 15px;
    }
    .product-img-main__image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: center center;
        background-size: cover;
        cursor: zoom-in;
        background-repeat: no-repeat;
        transition: -webkit-transform .5s ease-out;
        transition: transform .5s ease-out;
        transition: transform .5s ease-out,-webkit-transform .5s ease-out;
    }

JS

//Zoom Image
    $('.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') +')'});
    });