How To Add Hover Image in Blogger

Now you can hover image in blogger with this trick. You can add to your blog only with 4 steps. This is very simple and easy trick. So, let's start. 

Just follow this 4 steps :

1. Go to your Dashboard > Design > Edit HTML

2.Find this code </head> tag .

3. Paste code below, before </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".latest_img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".latest_img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>

4. Save template. Hit it! DONE! :D

Watch DEMO HERE.

Try it & good luck!   

credit to :

blogger tips & tricks