Fade/Greyscale jQuery Mouse Hover Effect For Blogger

 This is also another jquery photo fade effect.
Its back and white hover style. you have to use
two image for this.you can add it to your blogger
with easily. Earlier I made a post about How To
Add Attractive Css Image Hover Effect To
Blogger, So, you can try one of this.its easy.

Demo 

1. Log in to your blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    </head>

3. Paste below code before </head> tag

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
//]]>
</script>

4. Find this tag by using Ctrl+F    ]]></b:skin>

5. Paste below code before ]]></b:skin> tag

span.fadehover {
position: relative;
}

img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}

img.b {
position: absolute;
left: 0;
top: 0;
}

6. HTML Code (you can use this code in post area or sidebar as your like)

<span class="fadehover">

<img src="URL_of_normal_image" alt="" class="a" />

<img src="URL_of_greyscale_image" alt="" class="b" />

</span>

* Replace URL_of_normal_image with your image URL
* Replace URL_of_greyscale_image with back and white image URL

7.  Now save your template
You are done.