Jquery image hover zoomer

Here is the simple jquery zoomer without even keeping an extra copy of image using simple css and jquery(you can use bigger mage too).
















Usage:
Html:
<div class="bui_img" id="b0"><img alt="" src="image.jpg"></div>
Jquery script:
Add this code to you page 

// starting the script on page load
$(document).ready(function(){
 xOffset = 10;
  yOffset = 30;
 $(".bui_img").mouseover(function(e){
  var imgsrc = $(this).children('img:first').attr('src');//variable to store image source
  
  $("body").append("<p id='preview'><img src='"+ imgsrc +"' alt='Image preview' /></p>");  
  $("#preview")
   .css("top",(e.pageY - xOffset) + "px")
   .css("left",(e.pageX + yOffset) + "px")
   .fadeIn("fast"); 
 });
 
 $(".bui_img").mousemove(function(e){
  $("#preview")
   .css("top",(e.pageY - xOffset) + "px")
   .css("left",(e.pageX + yOffset) + "px");
 });
 
 $(".bui_img").mouseleave(function(e){
  
  $("#preview").remove();
 });
});

Note: store image source to variable  imgsrc.

Css:

#preview{border: 3px dotted gray;position: absolute;}

#preview img {height: 270px;//change image size to desired.}

Happy coding  :)