March 23, 2009

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 !



53 comments:

DA said...

thanks,
nice effect ;)

Divya Sai said...

Welcome ANMA !

Mohammad Mustafa Ahmedzai said...

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

$@! kr!$#n@ DeEp said...

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

Hi dude,

I think this post will be helpful to you:

Add Social Networking Buttons To Your Blog

.:: AmRMrX ::. said...

thanxxxxxxxxxxxxxxxx alot for the great post

oliva said...

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

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 !

oliva said...

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

Divya Sai said...

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

oliva said...

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

Divya Sai said...

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

oliva said...

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

Divya Sai said...

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

;)

Danoxs said...

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

Soufiane said...

i really don't like this comment form

!!RAZE!! said...

Thanks for the post

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

hack-krishna said...

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

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

Anup said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Ashok Gunasekaran said...

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

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

Divya Sai said...

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

thanks..

http://www.midekka.com

काशिफ़ आरिफ़/Kashif Arif said...

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

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

iXabhay said...

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

Hang said...

I hope its working done

idealmaster said...

when i try to replace this code:



with the linkopacity code


it shows Page not found!please help...

yahaya said...

thanks
teknikbuatblog.blogspot.com

ChachaInPlaya said...

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

Sai - Blogger Widgets said...

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

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

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

Nestor said...

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

hello ..

i applied all the code exactly as your instructions..

but it's not working..

mediamaniiac.blogspot.com

Sai - Blogger Help said...

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

raYkaizZer said...

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 ?

raYkaizZer said...

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

Anonymous said...

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



French Boy

Anonymous said...

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!

Anonymous said...

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

Cindy said...

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!

illyz said...

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

Anonymous said...

THANK YOU SO MUCH!!
Bless you :)

Anonymous said...

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

Anonymous said...

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

Công ty in ấn said...

so so

Müjdat Sayar said...

:))

Narender said...

Loving Your Tuts.Thanks for all these.

Anonymous said...

Brilliant - thank you!

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

comment on this post Share Your Views

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

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy