Comments on: CSS Opacity – 5 Faces of Transparency

By: ShibaShake

ShibaShake — Sat, 26 Jan 2013 18:26:00 +0000

In reply to Eric. Not sure - not something that I have looked for.

By: Eric

Eric — Thu, 24 Jan 2013 21:20:24 +0000

is there a plugin that does this?

By: CSS Opacity – 5 Faces of Transparency | My Blog

CSS Opacity – 5 Faces of Transparency | My Blog — Thu, 10 Jun 2010 22:16:22 +0000

[…] reading here: CSS Opacity – 5 Faces of Transparency This entry was posted on Tuesday, October 27th, 2009 at 9:55 pm and is filed under […]

By: Benxamin

Benxamin — Mon, 14 Dec 2009 04:22:03 +0000

Thankfully, they have such a thing as modernizer.js and eCSStender.js that solve CSS3 compatibility problems.

By: ShibaShake

ShibaShake — Thu, 05 Nov 2009 16:48:45 +0000

Hello Aakash,

Opacity only works for FireFox and other browsers that are CSS compliant. Sadly it does not work for IE.

IE has its own opacity command –

filter:alpha(opacity=50);

Just add those into your CSS definitions. Also your hover should look like this –

.image:hover
{
    opacity:1.0;
    filter:alpha(opacity=100);
}

However, using opacity may get you aliasing issues with IE. I highly recommend using transparent PNGs as is shown in step 5 above. It’s only weakness is that IE-6 does not support repeating transparent PNGs so it will not work there, but it works very well on IE-7 and IE-8.

As a side note – hover only works on links in IE-6 so you will need to use –

a:hover .image { blah }

By: aakash

aakash — Thu, 05 Nov 2009 12:00:27 +0000

.image
{
background-image: url(anu.png);
background-repeat: no-repeat;
height:200px;
width: 250px;
position:fixed;
left: 80%;
opacity:0.5;

}
.image:hover
{
opacity:100;

}

i followed and the instructions given above and wrote this code but only my image apocity is getting change but no hover effect is taking place. can you plz tell me whats wrong with this….

thanks