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.

Step 4: In this step, add the following CSS code inside the <style> tag and place it into the <head> section of your page.

<style type="text/css">
body
{
font-family: Arial, Sans-Serif;
font-size: 0.75em;
}
#imgstones
{
width: 100%;
overflow: hidden;
}
#imgstones a
{
position: relative;
float: left;
margin: 5px;
}
#imgstones a span
{
background-repeat: no-repeat;
width: 48px;
height: 48px;
display: none;
position: absolute;
left: 15px;
top: 15px;
}
#imgstones
{
border: solid 1px #999;
padding: 5px;
}
</style>

Step 5: In this step we write the script reference to the aspx page.

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.

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
Step 7: In this step we have to write the JavaScript code in the <body> tag of our page which is given below.
<script type="text/javascript">
$(document).ready(function () {
$('#imgstones').width(200);
$('#imgstones').mouseover(function () {
$(this).css("cursor", "pointer");
$(this).animate({ width: "500px" }, 'slow');
});
$('#imgstones').mouseout(function () {
$(this).animate({ width: "200px" }, 'slow');
});
});
</script>

Step 8: Now, let's review the body code of the Default2.aspx page. We've added an img tag.

Code:

<body>
<div>
<h1> Move mouse on image to Zoom In and Zoom Out </h1>
<br />
<a>
<img src="images/stones.jpg" alt="stone" id="imgstones" /></a>
</div>
</body>

Step 9: the complete code of the Default2.aspx page looks like the following:

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> Move mouse on image for Zoom In and Zoom Out effect </title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#imgstones').width(200);
$('#imgstones').mouseover(function () {
$(this).css("cursor", "pointer");
$(this).animate({ width: "500px" }, 'slow');
});
$('#imgstones').mouseout(function () {
$(this).animate({ width: "200px" }, 'slow');
});
});
</script>
<style type="text/css">
body
{
font-family: Arial, Sans-Serif;
font-size: 0.75em;
}
#imgstones
{
width: 100%;
overflow: hidden;
}
#imgstones a
{
position: relative;
float: left;
margin: 5px;
}
#imgstones a span
{
background-repeat: no-repeat;
width: 48px;
height: 48px;
display: none;
position: absolute;
left: 15px;
top: 15px;
}
#imgstones
{
border: solid 1px #999;
padding: 5px;
}
</style>
</head>
<body>
<div>
<h1> Move mouse on image for Zoom In and Zoom Out effect
</h1>
<br />
<a>
<img src="images/stones.jpg" alt="stone" id="imgstones" /></a>
</div>
</body>
</html>

Step 10: The design of the Default2.aspx page looks like this.

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

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

Summary

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

5 Comments

Join the conversation! Your thoughts help the community grow.

Kamlesh Yadav7y ago
How I can add scroller after zoom out. Becouse image going outside the display.
RamKrishn Mishra11y ago
Great job
Tabarak Hussain11y ago
wow! well try..........
jaykant jk13y ago
give example of j-query image zoom in Datalist
Neha Sharma14y ago
Hello, I am working on an online shopping website,I am unable to make a zoom as well as rotate in ASP.Net function like every website have for each product like: http://www.jabong.com/Grey-Slippers-82559.html Please help me so that i can do this ASAP. Looking forward for all of yours kind help. Thanks.