Lens Zoom Image On Mouse Over Using jQuery

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:

1. jquery.min.js

2. 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;