Wednesday, April 24, 2013

Lens Zoom Image On Mouse Over in Web Application Using jQuery


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.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="elevateZoom.js" type="text/javascript"></script>
    <style type="text/css">
            height: 389px;
            width: 484px;
    <div style="width: 1186px; height: 509px">
        <img id="image" alt="" src="image.jpg" />      
    <script type="text/javascript">
                zoomType: "lens",
                lensShape: "round",
                lensSize: 200
Move the mouse onto the image to see the zoom in.