Image Image Opacity - Image Hover Effect To Blogge

This is one of the most common and popular image hover effects, you would have seen on many blogs, including a number of pro-blogs too. Simply hover your mouse cursor on these images:

The hack is very simple, a small CSS code changes the opacity level of the images, whenever you place the mouse cursor over these images.

To add this effect to the images in your blog, follow these steps;

STEP1:
Log in to Blogger, go to Layout -> Edit HTML,
Find (CTRL+F)

</head>

STEP2:
And right before that tag, paste this code:

<!--LINK-OPACITY-STARTS-->
<style type="text/css">


a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}




a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }


</style>
<!--LINK-OPACITY-STOPS-http://3rb-game.blogspot.com/-->

STEP3:
Save the template.

STEP4:
Now whenever you want to show this effect to any of your images (whether in any post or in the sidebar), you have to modify the linking code like this:

Normally the code you use, to link any image will look like this:

<a href="http://3rb-game.blogspot.com/" target="_blank" alt="Blogger Help Templates Widget SEO Tips"><img src="http://www.gigaimage.com/images/rprt4ju7hysum6nkvbsv.png" /></a>

If you want to add the hover effect to the image, then add this simple code (in BOLD) to it, like this:

<a class="linkopacity" href="http://3rb-game.blogspot.com/" target="_blank" alt="Blogger Help Templates Widget SEO Tips"><img src="http://www.gigaimage.com/images/p70yhb40w1f8f45fna3.png" /></a>

You can leave the href="http://3rb-game.blogspot.com/" code in the above code, if you do not want to link the image to any url, but want to have this effect in it.