Adding Zoom Effect on Image Hover with CSS and jQuery

Abhigyan Singh 29th Sep 2020

In any web application, JQuery and CSS have become important for making an interactive user interface. Today we will use a little bit of CSS and JQuery for adding the Zoom effect on Image. Using this effect image size will increase or zoom when the user will hover on the image. Here we are using two CSS classes for doing this thing. First-class which is IMG-zoom is used on image load and the second class transition is used on mouseover.

We also use JQuery for a hover event to add or remove the transition class based on the mouse over the image. For better understanding let’s see this thing step by step as shown below:

1. Create one file index.html with the following code as shown below. In this file, we simply attach images with img tag and applying the class wrap.

<!doctype html>

<style>
.wrap {margin: 60px auto; text-align: center;}<br /> 
</style>
<h1>Simple Hover to Zoom Image Effect</h1>
<div class="wrap"><img src="aa.png" alt="DiscussDesk" /></div>

2. Now we are adding two CSS classes in the head tag in the same file. After adding the CSS class file will look like this:

<!doctype html>

<style>
.wrap {margin: 60px auto; text-align: center;}

.img-zoom {

width:310px;

-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(2);

-moz-transform: scale(2);

-o-transform: scale(2);

transform: scale(2);

}

</style>
<h1>Simple Hover to Zoom Image Effect</h1>
<div class="wrap"><img class="img-zoom" src="aa.png" alt="DiscussDesk" /></div>

3. Now we put some jQuery code for the hover event at the bottom of the file as well as with including online jQuery file as shown below:

<!doctype html>

<style>
.wrap {margin: 60px auto; text-align: center;}

.img-zoom {

width:310px;

-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(2);

-moz-transform: scale(2);

-o-transform: scale(2);

transform: scale(2); }

</style>
<h1>Simple Hover to Zoom Image Effect</h1>
<div class="wrap"><img class="img-zoom" src="aa.png" alt="DiscussDesk" /></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
$('.img-zoom').hover(function() {
$(this).addClass('transition');

}, function() {
$(this).removeClass('transition');
});
});
</script>

Now Run index.html on a browser will see the Zoom Effect on Image Hover.

Authored By Abhigyan Singh

He is a continuous blogger and has blogged on different topic. He loves to surf Internet and always trying to get new Idea about new Technology and Innovations and sharing these great information to all the technology lovers.

Also on DiscussDesk