Mário Andrade

CSS has some really interesting features that not everybody know of. One I find very interesting is called opacity. CSS Opacity is not a W3C Standard altought it’s part of the CSS3 recommendation but it’s supported by all modern browsers.

The big issue with the opacity property is, of course, IE support. For this you have to use MS Filter and alpha property: filter:alpha(opacity=value), for all other browsers just use opacity: value.
Before I get started with this there are a few things you need to know:

• The CSS opacity property values run from 0 to 1 meaning you can apply opacity of 0, 0.1, 0.2, 0.3… up to 1.
• When you apply opacity to a block, all elements inside that block will have the same opacity. Let’s say you have a block with 4 images inside. If you apply 0.5 opacity to the block, all 4 images will have 0.5 opacity as well.

Simple Opacity

The following image is from my personal Flickr account, it’s actually the first photo I took in 2009 and also the view from my balcony. Great view isn’t it?

For this example I applied a 50% opacity to the image using the opacity and filter:alpha properties. If you look into this page source code you’ll find:

<img src="http://farm4.static.flickr.com/3083/3160497654_ee19062980.jpg" width="500" height="375" alt="CSS Opacity" style="opacity:.5; filter:alpha(opacity=50);" />

Opacity change when mouse is hover the image

This example can be a bit tricky. I’m going to use some javascript to manage the hover effect and share the CSS code.

Again if you look to this page source code you’ll find:

<img src="http://farm4.static.flickr.com/3083/3160497654_ee19062980.jpg" width="500" height="375" alt="CSS Opacity" style="opacity:.5; filter:alpha(opacity=50);"  onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" class="imgOpacity" />

What I’ve done was use some javascript to change the image styles when the mouse is on top of the image and when it’s out. But since we don’t want this, it’s preferable that you use CSS. Notice I applied a class to the image called imgOpacity, this is only for tutorial purpose.

.imgOpacity {
opacity:.5;
filter:alpha(opacity=50);
}
.imgOpacity:hover {
opacity:1;
filter:alpha(opacity=100);
}

Just add this to your styles and apply the class to whatever you wish and you’ll have a rollover effect.

This block of text will change opacity when you run your mouse over it.

You may also use opacity on divs in order to create semi-transparent backgrounds which can be great when used correctly.

Multi-browser support of opacity

Like I mentioned the CSS Opacity Property is supported by all modern browsers. We’ve covered Internet Explorer’s exceptional case but previous versions of Opera and Firefox and other browsers may not render the opacity property correctly. For that you’ll need to apply some special properties:

-moz-opacity
-moz-opacity is needed for previous versions of Mozilla Firefox and Netscape browsers. Just apply -moz-opacity:value; and you are set.

Ex: -moz-opacity:0.5;

-kthml-opacity
-khtml-opacity will allow older versions of Safari (1.x) to recognize the opacity property. it’s used in similar way of -moz-opacity. It’s actually been deprecated since 2004 but if people still use IE6, some will probably use Safari 1.x. Personally I wouldn’t bother with this too much.

Ex: -khtml-opacity:0.5;

IE6 and 7 support
Unfortunately Internet Explorer can’t play along with the rest of the browsers. There are some known bugs in versions prior to IE8 that will not display opacity even though you use filter:alpha(opacity=value). I advise you to try and specify height and width of the element you want to apply the opacity to, it works many of the times. if that doesn’t do the trick I suggest you try applying the “ever so friendly” Microsoft filter hacks:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter:alpha(opacity=50);

Curiously when you use IE7 and IE8 works just fine but when you use IE8 as IE7 if you don’t use the hacks the Microsoft browser will not recognize opacity.

Interesting readings:

• Chris Coyier from CSS Tricks wrote a very interesting article on the subject called
  CSS transparency settings for all browsers. I advise you to read it and read the comments as they carry very useful information.
• The W3C article on CSS opacity subject. A quick and interesting reading.