Image hover effect in blogger (opacity effect)

Image hover effect is a good tweak you can do in your blog or any webpages. This is one of the most common and popular image hover effects. Simply hover the cursor in image and the opacity level changes.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.
Follow these steps to add the effect:
STEP 1
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://bloggerstop.net-->


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://bloggerstop.net" target="_blank" alt="Blogger Help Templates Widget SEO Tips"><img src="http://www.gigaimage.com/images/du41htpibgyb3fqeh9nt.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://bloggerstop.net" target="_blank" alt="Blogger Help Templates Widget SEO Tips"><img src="http://www.gigaimage.com/images/du41htpibgyb3fqeh9nt.png" /></a>