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. To change image opacity (transparency) simply hover your mouse cursor on these images:
 
 

Change Opacity - Image Hover EffectChange Opacity - Image Hover EffectChange Opacity - Image Hover EffectChange Opacity - Image Hover EffectChange Opacity - Image Hover EffectChange Opacity - Image Hover EffectChange Opacity - Image Hover Effect

 
 
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-https://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="https://bloggerstop.net" target="_blank" alt="Blogger Help Templates Widget SEO Tips"><img src="https://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="https://bloggerstop.net" target="_blank" alt="Blogger Help Templates Widget SEO Tips"><img src="https://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://bloggerstop.net/wp-content/uploads/2009/03/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://bloggerstop.net/wp-content/uploads/2009/03/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://bloggerstop.net/wp-content/uploads/2009/03/feed.png" /></a>

<a class="linkopacity" href="http://technorati.com/faves?sub=addfavbtn&amp;add=https://bloggerstop.net" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://bloggerstop.net/wp-content/uploads/2009/03/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://bloggerstop.net/wp-content/uploads/2009/03/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://bloggerstop.net/wp-content/uploads/2009/03/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://bloggerstop.net/wp-content/uploads/2009/03/digg.png" /></a></div>
 
 
Show off your work in the comments, and get your blog listed here !

Leave a Reply

51 Comments on "Change Opacity – Image Hover Effect"

Notify of
avatar
Sort by:   newest | oldest | most voted
DA
Guest

thanks,
nice effect 😉

View Comment
Divya Sai
Guest

Welcome ANMA !

View Comment
Mohammad Mustafa Ahmedzai
Guest

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

View Comment
$@! kr!$#n@ DeEp
Guest

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

View Comment
Divya Sai
Guest

Hi dude,

I think this post will be helpful to you:

Add Social Networking Buttons To Your Blog

View Comment
.:: AmRMrX ::.
Guest

thanxxxxxxxxxxxxxxxx alot for the great post

View Comment
oliva
Guest

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.

View Comment
Sai @ BloggerStop.Net
Guest

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 !

View Comment
oliva
Guest

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

View Comment
Divya Sai
Guest

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 😉

View Comment
oliva
Guest

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

View Comment
Divya Sai
Guest

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

View Comment
oliva
Guest

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

View Comment
Divya Sai
Guest

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

View Comment
Anonymous
Guest
Danoxs
Guest

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

View Comment
Soufiane
Guest
!!RAZE!!
Guest

Thanks for the post

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

View Comment
hack-krishna
Guest

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

View Comment
Amar Pratap Singh
Guest

:)) ;)) ;;) 😀 😉 :p :(( 🙂 🙁 :X =(( 😮 :-/ :-* 😐 8-} :)] ~x( :-t b-( :-L x( =))

View Comment
wpDiscuz