Adding Zoom Effect on Image Hover with CSS and jQuery

There are many plugins available to add special effect on images when cursor move over the image. All of those plugins includes a lot of codes in the web page which may effect on page load time. If you want to use less code and avoid page load time issue, our simple image zoom effect script is a perfect choice for you.

Enlarge image on hover creates a better user interface in any web application. You can easily add zoom effect to the image on mouseover with CSS and jQuery. In this tutorial, we’ll provide a simple way and short code snippets to adding image hover zoom effect using jQuery and CSS.

CSS Code

In the following CSS, styles are defined for 2 classes (.zoom and .transition). Style for the zoom class is used on image load and transition class is used on mouseover.

img.zoom {
    width: 350px;
    height: 200px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}
 
.transition {
    -webkit-transform: scale(1.8); 
    -moz-transform: scale(1.8);
    -o-transform: scale(1.8);
    transform: scale(1.8);
}

JavaScript Code

To working with jQuery, the jQuery library file need to be included.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

We’ll use jQuery hover event to add or remove the transition class based on the mouse hover the image.

<script>
$(document).ready(function(){
    $('.zoom').hover(function() {
        $(this).addClass('transition');
    }, function() {
        $(this).removeClass('transition');
    });
});
</script>

HTML Code

Add the zoom class to the image in which you want to add zoom effect on hover.

<img src="images/codexworld.jpg" class="zoom"/>