Introduction
This article describes how to create a simple image zoom in and zoom out effect with jQuery and CSS step by step. jQuery is a great tool that helps our imagination turn ideas into reality. We can do almost everything we can think of with the help of this useful tool.
Step 1: First we have to create a Web Application.
- Go to Visual Studio 2010.
- New--> And select the Web Application.
- Give whatever name you want to.
- Click OK.
Step 2: Secondly you have to 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 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 have to write the script reference to the aspx page; let us see from where you have to write the script code.
![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.
<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: In this step you will see the body code of the Default2.aspx page which is given below.
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: In this step we will see the complete code of the Default2.aspx page which is given below.
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: In this step we will see the design of the Default2.aspx page which is given below.
![img3.jpg]()
Step 11: In this step we are going to run the 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]()