Introducation
In this article I will explain how to zoom an image on mouse over using jQuery. Image mouseover effects can make your website look dynamic and feel more effective. It also helps you to better allocate your image captions. I have seen similar effects as this one in a few sites here and there, and they were always built in Flash. I wanted a CSS and JavaScript (jQuery) solution so I whipped up this Hover Zoom effect.
First we download the file:
-
jquery.min.js
-
jquery.fancybox.pack.js
These files are added to the project, then use the following procedure.
Step 1
Open Visual Studio 2012 and click "File" -> "New" -> "Web Site...". A window is opened. In this window, click "Empty Web Site" under Visual C#.
![aplication-name.jpg]()
Give your application the name "Zoom_Image_on_MouseOver" and then click "Ok".
Step 2
After this session the project has been created; a new window is opened on the right side. This window is called the Solution Explorer. Now add a HTML Page to the Web Site. Right-click on the project name. Select "Add new item". Add the new HTML page and give it a name. The Solution Explorer contains the js file and css file and HTML page.
![solution-explorer.jpg]()
Coding
Zoom_Image_on_MouseOver.html
<!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>
<title></title>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="elevateZoom.js" type="text/javascript"></script>
<script src="jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<style type="text/css">
#gallery img
{
border:2px solid white;width: 96px;
}
.activeborder img
{
border:2px solid #333 !important;
}
#image
{
width: 459px;
}
</style>
</head>
<body>
<div style="width: 1186px; height: 509px">
<img id="image" alt="" src="taj.jpg" />
<div id="gallery">
<a href="#" class="activeborder" data-image="taj.jpg" data-zoom-image="taj.jpg">
<img src="taj.jpg" ></a>
<a href="#" class="activeborder" data-image="image3.jpg" data-zoom-image="image3.jpg">
<img src="image3.jpg" ></a>
<a href="#" class="activeborder" data-image="image2.jpg" data-zoom-image="image2.jpg">
<img src="image2.jpg" ></a>
<a href="#" class="activeborder" data-image="image5.gif" data-zoom-image="image5.gif">
<img src="image5.gif" ></a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function ()
{
$("#image").elevateZoom({ gallery: 'gallery', cursor: 'pointer', galleryActiveClass: "activeborder" });
$("#image").bind("click", function (e) {
var ez = $('#image').data('elevateZoom');
ez.closeAll();
$.fancybox(ez.getGalleryList());
return false;
});
});
</script>
</body>
</html>
Output
Select an image from the given images and move the mouse onto the image to see the zoom in.
![Animation1.gif]()
For more information, download the attached sample application.