Bring your Mouse to the Image Below

Purpose
While the smaller thumbnail image is displayed in your post, the corresponding larger image is displayed inside a floating window only when the reader hovers his/her mouse cursor over the thumbnail-image. The image displaying-style inside the floating-window is exactly like that of a view through a magnifying lens or that of a microscopic view.


STEP #1
 Log in to Blogger and go to Layout -> Edit HTML
 then, find (CTRL+F) this code in your template:

</head>
 And immediately ABOVE/BEFORE it, paste this code:

<!--JQZOOM-STARTS-->
 <script src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery-1.3.2.min.js" type="text/javascript"></script>
 <script src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery.jqzoom1.0.1.js" type='text/javascript'></script>
 <link rel="stylesheet" href="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jqzoom.css" type="text/css" />
 <script type="text/javascript">

$(function() {
 var options =
 {

zoomWidth: 275,
zoomHeight: 275
}
 $(".jqzoom").jqzoom(options);

var options2 =
 {

zoomWidth: 275,
zoomHeight: 275,
zoomType:'reverse'
 }

$(".jqzoom2").jqzoom(options2);

});
 </script>
 <!--orkutty.blogspot.com--> Default width and height of zoom-window is fixed as 275x275 pixels. You may change the values if you want.

STEP #2
 Save your template.

STEP #3
 Now whenever you want to add this image-zoom effect to your images, simply add the class "jqzoom" to your a href tag.

So, if this is the usual code you use to display an image in your blog:

<a href="DIRECT_LINK_TO_THE_LARGER_IMAGE" title="IMAGE_TITLE"><img src="DIRECT_LINK_TO_THE_SMALLER_IMAGE"/></a>
 Now to implement the hack, the new code becomes:

<a href="DIRECT_LINK_TO_THE_LARGER_IMAGE" class="jqzoom" title="IMAGE_TITLE"><img src="DIRECT_LINK_TO_THE_SMALLER_IMAGE"/></a>
 In the DEMO, this is the larger image used while this one is the thumb-nail.

NOTE #1: To display the images with Reverse Opacity Effect (second image in the DEMO), add class="jqzoom2" instead of class="jqzoom"
NOTE #2 (IMPORTANT): For this hack, you should have two sizes of the same image. The smaller image is displayed in the blog, and the larger image is hyperlinked to the smaller image (displayed in the floating window).
 You may use any image-editor (MS-Paint/Adobe photoshop) to create the smaller thumbnail-image (displayed it in the blog posts).