Change Opacity - Image Hover Effect

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://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>

---

To show exactly the same buttons as displayed above, or in the "Connect with me" widget in the sidebar, use this code:

<div class="separator" style="clear: both; text-align: center;">
<a class="linkopacity" href="http://www.blogger.com/profile/00580458018752018936" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/_4fVBL4fjrFI/Scel64keP1I/AAAAAAAAC1c/qROGCrL9-9U/s320/blogger.png" /></a> <a class="linkopacity" href="http://delicious.com/network?add=dsai588" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_4fVBL4fjrFI/Scel7r3EmtI/AAAAAAAAC1k/V8mzRJglrB8/s320/delicious.png" /></a> <a class="linkopacity" href="http://feeds2.feedburner.com/Bloggerstopnet" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_4fVBL4fjrFI/Scel9qYYbwI/AAAAAAAAC18/FUe3bocbnbw/s320/feed.png" /></a> <a class="linkopacity" href="http://technorati.com/faves?sub=addfavbtn&amp;add=http://bloggerstop.net" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_4fVBL4fjrFI/ScemBu6wevI/AAAAAAAAC2M/7w82TUYOcjQ/s320/technorati.png" /> </a> <a class="linkopacity" href="http://dsai588.stumbleupon.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_4fVBL4fjrFI/ScemDH4Te4I/AAAAAAAAC2U/ffqJTNfVn2A/s320/stumbleupon.png" /> </a><a class="linkopacity" href="http://twitter.com/bloggerstop" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/_4fVBL4fjrFI/ScemDyDCVoI/AAAAAAAAC2c/2konYKMmSks/s320/twitter.png" /> </a><a class="linkopacity" href="http://digg.com/design/Free_Professional_Blogger_Blogspot_XML_Themes_Templates_Skin" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_4fVBL4fjrFI/Scemdf3mHII/AAAAAAAAC2k/CxjPtUIyzL4/s320/digg.png" /></a></div><a href="http://bloggerstop.net/2009/03/change-opacity-image-hover-effect.html" target="_blank"><span style="font-size: x-small;">Get this widget</span></a>

---

My Creative Readers:
Check out the best examples of this tutorial:
1. Buttons on a dark background - At Danoxs.BlogSpot.com by Danoxs

Show off your work in the comments, and get your blog listed here !

---

---