Comments on: CSS Opacity – 5 Faces of Transparency

By: vanarebane

vanarebane — Wed, 19 Jan 2011 07:37:09 +0000

Hello.

Please check how the background transparencies act when the div’s have some other content or borders. rgba leaves the borders and other containing backgrounds untouched.

By: buy kinect

buy kinect — Sun, 24 Oct 2010 09:18:26 +0000

Hello there,

This is a message for the webmaster/admin here at shibashake.com.

Can I use part of the information from your post above if I provide a backlink back to this website?

Thanks,
Daniel

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

metaw3 — Sat, 03 Apr 2010 01:55:04 +0000

I just wrote this jQuery plugin:
http://plugins.jquery.com/project/pureOpacity

Does that help?

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