Zoom Image On Mouse Over Using jQuery

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#. This will be different if you're using a different version of Visual Studio.

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.

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.

For more information, download the attached sample application.

Here is another similar article, Zoom In and Zoom Out Effect on Mouse Move in jQuery.

4 Comments

Join the conversation! Your thoughts help the community grow.

Tabarak Hussain11y ago
Nice try...............
vaibhav patel12y ago
How to dynamically give the data-zoom-image ?i think it is not possible , but if any one have good knowledge then just reply me
Nitin Bhardwaj13y ago
Thank u sir
Manoj Rajput13y ago
Good Article Nitin