Introducation
In this article I will explain how to create a lens 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 files:
-
jquery.min.js
-
elevateZoom.js
These files are added to the project, then use the following procedure.
Coding
Lens_Zoom_Image.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>
<style type="text/css">
#image
{
height: 389px;
width: 484px;
}
</style>
</head>
<body>
<div style="width: 1186px; height: 509px">
<img id="image" alt="" src="image.jpg" />
</div>
<script type="text/javascript">
$("#image").elevateZoom({
zoomType: "lens",
lensShape: "round",
lensSize: 200
});
</script>
</body>
</html>
Output
Move the mouse onto the image to see the zoom in.
![Animation1.gif]()
For more information, download the attached sample application.