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 !

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

53 comments

Write comments
DA
March 23, 2009 4:17 PM delete

thanks,
nice effect ;)

Reply
avatar
March 24, 2009 6:18 PM delete

Great Dsai! I was just looking for this trick, thks a tonne for sharing it.
Regards,
MOHD__

Reply
avatar
March 26, 2009 3:32 AM delete

hi man... i love your site ..its awesome.. i have a big prob man..

i want to have bookmarking icons like u have like twiter,digg etc.. but the problem is that how do i make it automatically get the title of the post when the person diggs it or stumbles it .. i can't put the link of the new post everytime na.

plz help

thnx

Reply
avatar
May 05, 2009 5:35 PM delete

thanxxxxxxxxxxxxxxxx alot for the great post

Reply
avatar
June 02, 2009 12:15 AM delete

I dont know why it is not working - at all. I would like to add my code here for you to maybe tell me whats wrong but I can't.

how can i show you, really want this to be fixed.

Reply
avatar
June 02, 2009 7:55 AM delete

It's alright dude...add the code to your blog's template, and give me the link to your blog, I'll check the source code !

Reply
avatar
June 02, 2009 3:02 PM delete

thanks for such a quick response. here is the site
www.surfsecurely.blogspot.com

Reply
avatar
June 02, 2009 3:11 PM delete

okay you have done upto step 3, and things are fine upto here, but what about step 4 buddy ?
put some images too, that is how we can chk if the hack is working or not ;)

Reply
avatar
June 02, 2009 10:39 PM delete

Hello.
Hehe you need to click on continue reading...then you will see the images. :)

Reply
avatar
June 02, 2009 10:47 PM delete

okay...do not use the images as background images, instead use them between the <a>....</a> tags, as a simple <img src=''/> tag.

Reply
avatar
June 05, 2009 2:59 AM delete

Hello again, I have finally fixed it but I have a grey border around my icons, you know what cs to change?

Reply
avatar
June 05, 2009 9:22 AM delete

although your "a img" css code has border=0, but this border may be coz of this:

#featured a img {
border:1px solid #bbb;

so make the border 0 as well.

Or in this code itself, you can add border elements as '0', like this:

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


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

Reply
avatar
August 09, 2009 4:52 PM delete

Thanks for the link again Divya !! But being in Spanish I don't really think they understand it, but thanks anyways !

Reply
avatar
September 02, 2009 6:55 AM delete

Thanks for the post

THE SITE IS
http://aka-core.blogspot.com

Reply
avatar
September 02, 2009 2:12 PM delete

thanks a lot dude...............
my blog(http://hack-krishna.blogspot.com) wud hv been nothin without yur tricks......
if u need any tech hacks, let me kno it abt it....

Reply
avatar
September 13, 2009 12:18 AM delete

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Reply
avatar
September 14, 2009 12:43 AM delete This comment has been removed by a blog administrator.
avatar
Anonymous
September 17, 2009 12:53 AM delete This comment has been removed by a blog administrator.
avatar
September 23, 2009 10:31 AM delete

I have this site which has very nice funny articles...may be u can have a look at it ! definitely u r gonna have a laugh at these !

http://www.ashokgunasekaran.blogspot.com

Please follow if you like it and I will do the same.

Reply
avatar
September 29, 2009 9:19 PM delete

Hi, do you possibly have a PNG of the Facebook logo? None of mine working in this..

Reply
avatar
September 30, 2009 7:26 AM delete

In what dimensions do you want the icon?
Here's in 60x60
http://i34.tinypic.com/281hoi8.jpg

and here's 48x48
http://i33.tinypic.com/2h30hol.jpg

Regards
Sai

Reply
avatar
October 15, 2009 4:41 PM delete

thanks..

http://www.midekka.com

Reply
avatar
January 06, 2010 12:18 PM delete

hiiiii Divya...

I use this widgets in my two blogs

http://uniquelikeme.blogspot.com

http://qur-aninhindi.blogspot.com

but there is some questions....

1. In your blog it's showing 9 items & in mine only 7..how can i add or change these logo's???

2. In stumbleupon your account address is dsai588.stumbleupon but in mine is showing as a Stumbler....how it's possible???

please reply to my mail address

=============

Reply
avatar
February 11, 2010 7:47 AM delete

I can't change the opacity of my blog its so aggravating.

Reply
avatar
April 16, 2010 11:57 PM delete

Thank you, I've added this effect to the bookmarks button on my site ;)

Reply
avatar
April 19, 2010 9:24 PM delete

I hope its working done

Reply
avatar
April 23, 2010 12:27 AM delete

when i try to replace this code:



with the linkopacity code


it shows Page not found!please help...

Reply
avatar
April 28, 2010 1:57 AM delete

thanks
teknikbuatblog.blogspot.com

Reply
avatar
July 10, 2010 12:57 AM delete

hi, is there any way to change the opacity to a different color when its not being hovered?

Reply
avatar
July 10, 2010 1:44 AM delete

As these buttons are transparent/translucent - so these buttons take the background color. So, just change the background color to give these buttons a diff appearance in the 'not hovered' state.
This may help you: How to show different background color or image for separate posts or paragraphs

Reply
avatar
October 03, 2010 10:48 AM delete

I want that plugin you are using above having share this post, bookmark this blog and recommended posts tabs. that is hell awesome... please tell me from where i can get that for my blog...

Reply
avatar
October 03, 2010 11:39 AM delete

Hello Umar, I am glad you liked that widget so much. It is basically a multi-tabbed widget wherein you can add content of your choice, here's the tutorial for that widget:
http://bloggerstop.net/2009/12/part-2-collapsible-multi-tabbed-widget.html

Reply
avatar
November 08, 2010 4:15 AM delete

Many thanks for this cool widget. I managed to add two social networking icons on my new blog with the help of your tutorial.
It certainly looks neat and cool at the same time :)
Cheers
Nestor

Reply
avatar
December 29, 2010 12:30 PM delete

hello ..

i applied all the code exactly as your instructions..

but it's not working..

mediamaniiac.blogspot.com

Reply
avatar
December 29, 2010 1:06 PM delete

You have done step 1 and 2 correctly.
Add the required code (from Step 4) to your images.

Reply
avatar
December 29, 2010 11:17 PM delete

hello ..
thanks for the quick reply ..
i actually have put the code from step 4 in my image..
for instance, i also add the example code that you give above and put it under my blog post ..
but as you can see, its not working at all..
is it something to do with my template ?

Reply
avatar
December 31, 2010 2:06 AM delete

hello again ..
i had fix my problem ..
it seems that i put the code at the wrong section ..
thanks again ..

Reply
avatar
Anonymous
February 16, 2011 2:47 AM delete

a BIG BIG THANX!!!
I finally found the PERFECT solution!



French Boy

Reply
avatar
Anonymous
July 13, 2011 4:48 PM delete

thank you so much! I've been trying to find an effect like this and yours was the most simple i've found yet. thank you so much!

Reply
avatar
Anonymous
July 16, 2011 8:55 PM delete

it worked perfectly :) is there any way to make it fade instead of just changing right away?

Reply
avatar
September 09, 2011 8:00 PM delete

awesome site and great instructions! I'm new to blogging and have become hooked very quickly, I'm glad I found your site early on in the game!

Reply
avatar
September 15, 2011 11:19 PM delete

wow...good tips and easy to understand..thanks a lot

Reply
avatar
Anonymous
September 30, 2011 10:52 PM delete

THANK YOU SO MUCH!!
Bless you :)

Reply
avatar
Anonymous
October 24, 2011 2:13 PM delete

Hey visit this page and hover any image and see the effect. I exact wants that. Plz add. Link- www(dot)abduzeedo(dot)com

Reply
avatar
Anonymous
November 04, 2011 10:38 PM delete

Hi :) This is awesone.... worked right away.....
Do you have any code, so insted of fading it shows in BLACK/WHITE o "Grey Scale".... JUST ASKING :) THANKS

Reply
avatar
August 11, 2012 10:53 PM delete

Loving Your Tuts.Thanks for all these.

Reply
avatar
Anonymous
October 06, 2012 5:14 PM delete

Brilliant - thank you!

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon