Change Opacity - Image Hover Effect

Blogger Webmaster Tools

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:

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

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiafcVmcJ-x0mmU-pxC9mV0E5__lmVXHrPqT_5tlsz8VIFZV7T8HCz7pm23B3gFTRcl1OZ7Tk2jPdhW9OsJxusxY20-5sBtv5Chj9xtT6CY0g7YidwQOgd6AAzZPWXdRMw60APEQZhjNouv/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLxW37TfI1DDOZi_HGagskTY0k7g4IOdoSmcZazdFshCnvDFbxi-ACX2K3PjHqaEwY2YlMqMeP0LlcyQa-1PFD4Zowsgj4lBxyphKjRVafitT5Dbwnj-4Z47Zwe2pab_nAsg3tRNokx1vO/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4aBCi1epzibRaP4-HXvxt5urvO1gCz1UZNwYFadstv0jEQWmN-_S3q9de6mRIoaQbbZ67_Pm78inazgoqndjB1ewa-NMQcTXmDI0GTIVCKNCY3XG6UUyJP7_N7VWiqUi4NNRgm-f4BB24/s320/feed.png" /></a> <a class="linkopacity" href="http://technorati.com/faves?sub=addfavbtn&add=http://bloggerstop.net" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikJSjr00BLNoQzpQYcuW_D_vufHu7Nv5YRstkd3ujNkrRQEfScOM92wfkSIIJOnwHtjd4U0wIkaJy4ithBBdhxmdIRoLSKW8-sOYocdAw74r8iOz8p_HMZEvReQF3CGE9esVm7Whd8IjWz/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxusBItpyQmqCuZUfwwoop-xEbbL9-_iLfZGlk2mJlTgdv2otJ4bGnQfVighO-s_jNAHmhgl7_X1IjKCk-Y87x9V-YraqBSa06KxzwQi5_eUkTvymhVt63s0gM7i_b4Q2vLVwA_xFSNuaT/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheUB3ZmzXMy0CNdoOV5znDQA4FGcBHtt4sHR5RakkDlhZpKCbicS0ufAzNmjrtkxLhSTyrCBL23RwisgZzWX3qkUHUACW7jIntH1r0Ov0-fJRxFz4udhi0EMGyqp9_h1LWBzoccdrTMiBZ/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-kL8MAg8xeFg1a-W2ZgZbmLS0DCI0OSSFaM-ohk35AXHQ5a8pcZH4GLqr73BOrl0lySQIJc8DSuD-iJrYz5k2n-CXCtTtisnam4KxYlEd8OYAYkx3yPPRP-1IEmTSRWE5AJpV43LRxvFO/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 !

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Google Facebook Twitter More

52 comments

Write comments

Unknown

March 23, 2009 4:17 PM delete

thanks,
nice effect

Divya Sai

March 23, 2009 4:23 PM delete

Welcome ANMA !

Mohammad Mustafa Ahmedzai

March 24, 2009 6:18 PM delete

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

$@!

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

Divya Sai

March 26, 2009 8:07 AM delete

Hi dude,

I think this post will be helpful to you:

Add Social Networking Buttons To Your Blog

mcx

May 05, 2009 5:35 PM delete

thanxxxxxxxxxxxxxxxx alot for the great post

Anonymous

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.

Sai @ BloggerStop.Net

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 !

Anonymous

June 02, 2009 3:02 PM delete

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

Divya Sai

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

Anonymous

June 02, 2009 10:39 PM delete

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

Divya Sai

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.

Anonymous

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?

Divya Sai

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; }

Anonymous

August 04, 2009 6:42 AM delete

;)

Danoxs

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 !

Soufiane

August 16, 2009 7:02 AM delete

i really don't like this comment form

!!RAZE!!

September 02, 2009 6:55 AM delete

Thanks for the post

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

hackrishna

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....

Amar Pratap Singh

September 13, 2009 12:18 AM delete

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

Anup

September 14, 2009 12:43 AM delete This comment has been removed by a blog administrator.

Anonymous

September 17, 2009 12:53 AM delete This comment has been removed by a blog administrator.

Ashok Gunasekaran

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.

Lina

September 29, 2009 9:19 PM delete

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

Divya Sai

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

Midekka

October 15, 2009 4:41 PM delete

thanks..

http://www.midekka.com

काशिफ़ आरिफ़/Kashif Arif

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

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

SnipersUnite

February 11, 2010 7:47 AM delete

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

iXabhay

April 16, 2010 11:57 PM delete

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

Hang

April 19, 2010 9:24 PM delete

I hope its working done

Ideal Master

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...

sibersensasi

April 28, 2010 1:57 AM delete

thanks
teknikbuatblog.blogspot.com

Chacha

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?

Sai - Blogger Widgets

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

Umar

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...

Sai - Blogger Widgets

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

NestorV

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

raYkaizZer

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

Sai - Blogger Help

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.

raYkaizZer

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 ?