Add a Fade Effect to Images on your blog



I'm gonna teach you how to add a fade effect to the images posted on your blog. 
When you apply this effect you will see a fade effect when you move your mouse over an image posted on 
a blog post. 
Live demo CLICK HERE.

STEP 1. Login to your blogger Dashboard--> Design- -> Edit HTML

STEP 2. Scroll down to where you see </head> tag. (To search press Ctrl+F)

STEP 3. Copy below code and paste it just before the </head> tag.
$(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>

 
Design by Wordpress Theme | Bloggerized by Free Blogger Templates | coupon codes