Post
Ask Question

Image Zoom in and Zoom Out Effect in JQuery On Mouse Move

In this step by step article describes how to create a simple image zoom in and zoom out effect with jQuery and CSS.
 
jQuery is a great tool that helps our ideas into reality when it comes to Web effects and animations. One of the common need of images is zoom in and zoom out images in a Web browser. Here are the steps to implement the same.
 
Step 1: First we create a Web Application using Visual Studio.
  • Go to Visual Studio 2010. 
  • New--> And select the Web Application.
  • Give whatever name you want to.
  • Click OK. 
Step 2: Add a new page to the website. 
  • Go to the Solution Explorer.
  • Right-click on the project name.
  • Select add new item.
  • Add new web page and give it a name.
  • Click OK. 
Step 3: Now add some images in the "Images" folder of the project.
 
img1.jpg
 
Step 4: In this step, add the following CSS code inside the <style> tag and place it into the <head> section of your page. 
  1. <style type="text/css">  
  2. body  
  3. {  
  4. font-family: Arial, Sans-Serif;  
  5. font-size: 0.75em;  
  6. }  
  7. #imgstones  
  8. {  
  9. width: 100%;  
  10. overflow: hidden;  
  11. }  
  12. #imgstones a  
  13. {  
  14. position: relative;  
  15. float: left;  
  16. margin: 5px;  
  17. }  
  18. #imgstones a span  
  19. {  
  20. background-repeat: no-repeat;  
  21. width: 48px;  
  22. height: 48px;  
  23. display: none;  
  24. position: absolute;  
  25. left: 15px;  
  26. top: 15px;  
  27. }  
  28. #imgstones  
  29. {  
  30. border: solid 1px #999;  
  31. padding: 5px;  
  32. }  
  33. </style>  
Step 5: In this step we write the script reference to the aspx page.

img2.jpg

 
Right-click on selected files respectively. Copy and paste it inside <Head> section of your page; see Step 6.
 
Step 6: Let us see the script code to add inside the <script></script> tags and that will be placed either in the <head> section or the <body> section as you prefer. 
  1. <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
  2. Step 7: In this step we have to write the JavaScript code in the <body> tag of our page which is given below.  
  3. <script type="text/javascript">  
  4. $(document).ready(function () {  
  5. $('#imgstones').width(200);  
  6. $('#imgstones').mouseover(function () {  
  7. $(this).css("cursor", "pointer");  
  8. $(this).animate({ width: "500px" }, 'slow');  
  9. });  
  10. $('#imgstones').mouseout(function () {  
  11. $(this).animate({ width: "200px" }, 'slow');  
  12. });  
  13. });  
  14. </script>  
Step 8: Now, let's review the body code of the Default2.aspx page. We've added an img tag.
 
Code: 
  1. <body>  
  2. <div>  
  3. <h1> Move mouse on image to Zoom In and Zoom Out </h1>  
  4. <br />  
  5. <a>  
  6. <img src="images/stones.jpg" alt="stone" id="imgstones" /></a>  
  7. </div>  
  8. </body>  
Step 9: the complete code of the Default2.aspx page looks like the following:
 
Code:  
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default3" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5. <title> Move mouse on image for Zoom In and Zoom Out effect </title>  
  6. <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
  7. <script type="text/javascript">  
  8. $(document).ready(function () {  
  9. $('#imgstones').width(200);  
  10. $('#imgstones').mouseover(function () {  
  11. $(this).css("cursor", "pointer");  
  12. $(this).animate({ width: "500px" }, 'slow');  
  13. });  
  14. $('#imgstones').mouseout(function () {  
  15. $(this).animate({ width: "200px" }, 'slow');  
  16. });  
  17. });  
  18. </script>  
  19. <style type="text/css">  
  20. body  
  21. {  
  22. font-family: Arial, Sans-Serif;  
  23. font-size: 0.75em;  
  24. }  
  25. #imgstones  
  26. {  
  27. width: 100%;  
  28. overflow: hidden;  
  29. }  
  30. #imgstones a  
  31. {  
  32. position: relative;  
  33. float: left;  
  34. margin: 5px;  
  35. }  
  36. #imgstones a span  
  37. {  
  38. background-repeat: no-repeat;  
  39. width: 48px;  
  40. height: 48px;  
  41. display: none;  
  42. position: absolute;  
  43. left: 15px;  
  44. top: 15px;  
  45. }  
  46. #imgstones  
  47. {  
  48. border: solid 1px #999;  
  49. padding: 5px;  
  50. }  
  51. </style>  
  52. </head>  
  53. <body>  
  54. <div>  
  55. <h1> Move mouse on image for Zoom In and Zoom Out effect  
  56. </h1>  
  57. <br />  
  58. <a>  
  59. <img src="images/stones.jpg" alt="stone" id="imgstones" /></a>  
  60. </div>  
  61. </body>  
  62. </html>  
Step 10: The design of the Default2.aspx page looks like this.

img3.jpg 

 
Step 11: Now build and run Default2.aspx page by pressing F5.

img4.jpg

 

Move the mouse on the image to see the zoom in and zoom out effect. 

img5.jpg

img4.jpg

 
Summary
 
In this article and code sample, we saw how to implement zoom in and zoom out effect on images using jQuery.
 
 


Similar Articles