Image/thumbnail Zoom Effect on Mouse Hover Using jQuery in Blogger Blogspot

Features

1) Image Zooms on Hovering Cursor Over It.
2) Only One image is used.
3) Once applied it can be used any where in website.

DEMO

Installation:

Check Updated Tutorial Here->

Login to Blogger>>>Go To LAYOUT>>>Then Click On Edit HTML>>>Check Mark Expand Widgets>>>Press Ctrl+F

Search For ]]></b:skin> code:Copy below code and paste it just before the ]]></b:skin> tag.

ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;  /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzELI4dGznmvYYy2OlulIfFsKan2PL_3MBTwgGYZkn2HrmyUMnR4yqRltvz252cPiwSPQHTpXtLaG4CM8fdz-KZ2ryJB-NgxZfSX2n_kz2xmBO1iNiA31ha9X0McExYRV8Etov6M4D1klK/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

Search </head> tag:

Copy below code and paste it just before the </head> tag.

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false;
});

});
</script>

Click on "Save Templates"

Now Go To LAYOUT>>>Add a Gadget>>>Select HTML and Java>>>Paste the Below Code

OR

You can use this code directly in your post

<ul class="thumb"><li><a href="#"><img src="IMG 1" alt="" /></a></li><li><a href="#"><img src="IMG 2" alt="" /></a></li><li><a href="#"><img src="IMG 3" alt="" /></a></li><li><a href="#"><img src="IMG 4" alt="" /></a></li><li><a href="#"><img src="IMG 5" alt="" /></a></li></ul>


<span style="font-size:4px;"><a href="http://bloggerplugnplay.blogspot.com/" target="_blank">Plug it</a></span>

Note : Replace IMG 1-5 with your images links.

You Must See Other Image Zoom Effects :)

• Zoom or Magnify Image to Original Full Size On Click Using jQuery In Blogger
• How to Auto Show Image/Thumbnail Tooltip PopUp on Hovering a Link Using jQuery in Blogger Blogs.
• How to Auto Show Image/Thumbnail Tooltip PopUp on Hovering a Link Using jQuery in Blogger Blogs.