Adding Zoom Effect on Image Hover with CSS and jQuery

In any web application, JQuery and CSS have become important for making interactive user

interface. Today we will use little bit of CSS and JQuery for adding Zoom effect on Image. Using

this effect image size will increase or zoom when user will hover on image. Here we are using

two CSS class for doing this thing. First class which is img-zoom is used on image load and

second class transition is used on mouseover. We also use JQuery for hover event to add or

remove the transition class based on the mouse hover the image. For better understanding

let’s see this thing step by step as shown below:

  1. Create one file index.html with following code as shown below. In this file, we simply attach image with img tag and applying class wrap.
    <!doctype html>
    <html lang="">
        <head>
            <title>Simple Hover to Zoom Image Effect</title>	
           <style>		  
            .wrap {margin: 60px auto; text-align: center;}
    	         </style>	  
        </head>
        
        <body>
        		
    		<h1>Simple Hover to Zoom Image Effect</h1>
    		<div class="wrap">
    			<img  src="aa.png" alt="DiscussDesk">
    		</div>
    		
    	</body>
    </html>
    
         
  2. Now we are adding two CSS class in head tag in same file. After adding CSS class file will look like this: 
    <!doctype html>
    <html lang="">
        <head>
            <title>Simple Hover to Zoom Image Effect</title>	
       <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>	  
        </head>
        
        <body>
        		
    		<h1>Simple Hover to Zoom Image Effect</h1>
    		<div class="wrap">
    			<img class="img-zoom" src="aa.png" alt="DiscussDesk">
    		</div>
    		
    	</body>
    </html>
    

             

  3. Now we put some jQuery code for hover event at the bottom of file as well as with including online jQuery file as shown below: 
    <!doctype html>
    <html lang="">
        <head>
            <title>Simple Hover to Zoom Image Effect</title>	
       <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>	  
        </head>
        
        <body>
        		
    		<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>
    		
               </body>
    </html>
    

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

Share this Article on Social Media

All of my Scripts are ready to customized as per your requirement. Feel free to contact for script customization.

Contact me at discussdesk@gmail.com

"Note : It will be charged as per your customization requirement :)"

Get Updates, Scripts & Other Tutorials to Directly to your Email

Over 20000+ Happy Readers already subscribed. (We don't send spam email). Every email subscriber can get our latest updates and download our 100+ scripts.

Comments