Simple magnifier / zoom effect by jQuery & CSS3

Did you ever see a magnifier glass in a web page? When your mouse move over a small image, you could see the details in the magnifier glass? And would do you like to make the zoom effect in your own web page? Let’s write some simple lines by jQuery to have the task done.

Click here to see the demo page
Download the Demo pages

First, let’s put the image in the page, and give it a width and height to make it smaller.

HTML

<div class="zoom">
	<img src="blueDoor.jpg" width="400" height="265" />
</div>

We will show the big image in the magnifier glass as background image, and change background image position while user move the mouse. If the mouse move out of the small image, we fade out the magnifier glass, vice versa. There is an illustration to show how we calculation the positions.

Let start the jQuery code:
$(document).ready( function(){
        var zoom = $(".zoom")				
        var smallImg = $(".zoom img")			
        //Add magnifier div in zoom container
        zoom.append("
<div class='magnifierGlass'></div>

");
        
        var glass = $(".magnifierGlass");
        var bgImg = "url(" + smallImg.attr("src") + ")";
        
        // Initial magnifer position
        var leftInitial = smallImg.offset().left - zoom.offset().left - glass.width()/2;
        var topInitial = smallImg.offset().top - zoom.offset().top - glass.height()/2 ;			
        glass.css({ 
              backgroundImage: bgImg,
              backgroundRepeat: "no-repeat",
              backgroundPosition: "0px 0px",
              left: leftInitial,
              top: topInitial
                  });
        
        //get image's real width and height by creat a new image with same src attribution
        // then compare with the small image's width and height
        var newImage = new Image();
        newImage.src= smallImg.attr("src");
        var Wrate= (newImage.width - glass.width())/smallImg.width() ;
        var Hrate= (newImage.height - glass.height()) /smallImg.height();
        
        // magnifer moves with mouse move
        zoom.mousemove( function(e){

              var	Pleft  = e.pageX - zoom.offset().left-glass.width()/2;
              var	Ptop   = e.pageY -zoom.offset().top-glass.height()/2;
              var	left   = e.pageX-smallImg.offset().left;
              var	top    = e.pageY-smallImg.offset().top;
              var	bgLeft = left  * Wrate;
              var	bgTop  = top * Hrate;
              //Adding 15px is for seeing the zoom better while mouse in the edge.
              var	imgW   = smallImg.width() +15; 
              var	imgH   = smallImg.height() +15;
              
             // if mouse position within the small image, magnifier shows 
            if ( left > 0 & left < imgW & top > 0  & top < imgH ){	  
                   glass.fadeIn().css({
                              left: Pleft,
                              top: Ptop,
                              backgroundPosition: "-" + bgLeft + "px -" + bgTop +"px",												
                             })	
                                                                    };
            //if mouse is outside of the small image, magnifier hides
            if ( left < 0 || left > imgW ||  top < 0 || top > imgH ){	
                                                         glass.fadeOut();															
                                                                      };																
                                
                        }							
            )				
		})

In order to make the magifier glass looks round and crisp, we can try some new features of CSS3: the border-radius. The div is a square, and we make the border-radius as half of the width, so, the div will look like a perfect round shape. ( for IE8 and below, it’s still square, I think we can call it graceful degradation)

CSS
.magnifierGlass{
	-moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius:100px;
	-moz-box-shadow:0 1px 9px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow:0 1px 9px rgba(0, 0, 0, 0.5);
    box-shadow:0 1px 9px rgba(0, 0, 0, 0.5);
    border:4px solid #f3f3f3;
    width:200px;
    height:200px;
    cursor:default; 
    position:absolute;
    }
 

Note: The image I used here is from here