New Cool Image Hover Slight Zoom With Little Fading Using jQuery For Blogger

Changing Opacity on hover is very old and common now.Here is a new jQuery based image effect.This gives a new life to images just see the demo below:)

View Demo

Please Download Scripts And Upload in Your Own Server Then use Direct Links to files In Below Code.
Where To Upload These Scripts ?Click Here To Know :)

• 
  Download Scripts!
  

Installation:

Step 1:


Javascript+CSS

Login your BLOGGER account And click on Layout in the sub menu click then Edit HTML

Now Find ]]></b:skin> Then Replace it with Below Code

]]></b:skin> 

<script src='http://bloggerplugnplay-files.bravehost.com/jquery-1.3.1.min.js'/>




<script>

$(document).ready(function() {

//move the image in pixel
var move = -15;

//zoom percentage, 1.2 =120%
var zoom = 1.2;

//On mouse over those thumbnail
$(&#39;.zitem&#39;).hover(function() {

//Set the width and height according to the zoom percentage
width = $(&#39;.zitem&#39;).width() * zoom;
height = $(&#39;.zitem&#39;).height() * zoom;

//Move and zoom the image
$(this).find(&#39;img&#39;).stop(false,true).animate({&#39;width&#39;:width, &#39;height&#39;:height, &#39;top&#39;:move, &#39;left&#39;:move}, {duration:200});

//Display the caption
$(this).find(&#39;div.caption&#39;).stop(false,true).fadeIn(200);
},
function() {
//Reset the image
$(this).find(&#39;img&#39;).stop(false,true).animate({&#39;width&#39;:$(&#39;.zitem&#39;).width(), &#39;height&#39;:$(&#39;.zitem&#39;).height(), &#39;top&#39;:&#39;0&#39;, &#39;left&#39;:&#39;0&#39;}, {duration:100});

//Hide the caption
$(this).find(&#39;div.caption&#39;).stop(false,true).fadeOut(200);
});

});

</script>

<style media='screen' type='text/css'>


.zitem {
width:125px;
height:125px;
border:4px solid #222;
margin:5px 5px 5px 0;

/* required to hide the image after resized */
overflow:hidden;

/* for child absolute position */
position:relative;

/* display div in line */
float:left;
}

.zitem .caption {
width:125px;
height:30px;
background:#000;
color:#fff;
font-weight:bold;

/* fix it at the bottom */
position:absolute;
bottom:-1px; /* fix IE issue */
left:0;

/* hide it by default */
display:none;

/* opacity setting */
filter:alpha(opacity=70);    /* ie  */
-moz-opacity:0.7;    /* old mozilla browser like netscape  */
-khtml-opacity: 0.7;    /* for really really old safari */
opacity: 0.7;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.zitem .caption a {
text-decoration:none;
color:#fff;
font-size:12px;

/* add spacing and make the whole row clickable*/
padding:5px;
display:block;

}

img {
border:0;

/* allow javascript moves the img position*/
position:absolute;
}

.clear {
clear:both;
}



</style>

Step 2:


HTML

Login your BLOGGER account And click on Layout in the sub menu click PAGE ELEMENT Click Add a GADGET select HTML/JAVA paste below code in it and Click SAVE

<div class="zitem">
<a href="#"><img src="1.jpg" alt="Blogger Play n Play" title="" width="125" height="125"/></a>
<div class="caption">
<a href="">Test 1</a>

</div>
</div>

<div class="zitem">
<a href="#"><img src="2.gif" alt="Test 2" title="" width="125" height="125"/></a>
<div class="caption">
<a href="">Test 2</a>

</div>
</div>

<div class="zitem">
<a href="#"><img src="3.png" alt="Test 3" title="" width="125" height="125"/></a>
<div class="caption">
<a href="">Test 3</a>

</div>
</div>

Please Comment If you liked this Effect =)

Credits : http://www.queness.com distributed and converted for blogger by Blogger Plug n Play