CSS Opacity

Figure 1There has been a lot of discussion and headache over the proposed CSS 3 - opacity feature, or more specifically Internet Explorer's lack thereof and its proprietary filters. As it relates to this article, the "not-so-equivalent" filter:alpha in particular.

When developers began test driving IE 8 there was some commotion over Microsoft's decision to pull support for the existing filter:alpha syntax in the new version (among other, things) which left many sites with a broken opacity. Fortunately for everyone, applying transparent properties in the major browsers remains a trivial task, albeit not what it should be in Internet Explorer.

If you haven't had a chance to check out IE 8, you'll be pleased to know it adheres to CSS 2 quite well. This is good news for those of you that were able to develop your pages with a strict doc type and minimal IE hacking. In the case of ITNewb, simply changing the gte IE 7 conditional comment to IE 7 corrected all of the blemishes in IE 8 due to IE 7 hacking apart from filter:alpha, which required an additional declaration in the CSS.

In this article I'll be covering opacity techniques for all the major browsers, whether it be Firefox, Opera, Safari, Chrome or Internet Explorer. You'll also learn how to create fading effects with JavaScript from scratch that can be used on fading menus, fading photos and so on.

What is Opacity?

Opaque means not transparent or translucent. Something that is fully opaque has no transparency, so when we reduce the opacity of an element it begins to have transparency.

To adjust an HTML elements opacity, we have to use the following 4 declarations in our CSS (this example will set an element to 50% opaque or 50% transparent -- however you want to word it):

  1. .opacity50 {
  2.     opacity:0.50; /* firefox, opera, safari, chrome */
  3.     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; /* IE 8 */
  4.     filter:alpha(opacity=50); /* IE 4, 5, 6 and 7 */
  5.     zoom:1 /* so the element "hasLayout"
  6.     /* or, to trigger "hasLayout" set a width or height */
  7. }

It should be noted that as of Firefox 3.5 there is no longer support for -moz-opacity, and at this point we should simply be using the opacity property. For more information, take a look at this document. Also note, the Microsoft filter and zoom properties are not in the CSS 2 / 3 standards.

If you're unfamiliar with "hasLayout", read this page.

Image Example

Let's take a look at a few examples on a JPEG image. Starting on the left, I've set the opacity to 25%, 50%, 75% and fully opaque. Download the attachment above for a demo of the code in this article.

Figure 2

You can use this code on just about any element, it doesn't have to be an image. Please note, the Microsoft filter and zoom are not in the CSS 2 / 3 standards.

  1. // CSS
  2. .opacity25 { /* 25% opaque */
  3.     opacity:0.25;
  4.     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=25)";
  5.     filter:alpha(opacity=25);
  6.     zoom:1
  7. }
  8. .opacity50 { /* 50% opaque */
  9.     opacity:0.50;
  10.     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
  11.     filter:alpha(opacity=50);
  12.     zoom:1
  13. }
  14. .opacity75 { /* 75% opaque */
  15.     opacity:0.75;
  16.     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=75)";
  17.     filter:alpha(opacity=75);
  18.     zoom:1
  19. }
  20. .opacity100 { /* fully opaque */
  21.     opacity:1;
  22.     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
  23.     filter:alpha(opacity=100);
  24.     zoom:1
  25. }

  1. // HTML
  2. <img src="img1.jpg" class="opacity25" alt="JPG Opacity 25%" />
  3. <img src="img1.jpg" class="opacity50" alt="JPG Opacity 50%" />
  4. <img src="img1.jpg" class="opacity75" alt="JPG Opacity 75%" />
  5. <img src="img1.jpg" class="opacity100" alt="JPG Opacity 100%" />

Hover Effect

On modern browsers, the dynamic :hover pseudo-class works on just about any element, whether it be an anchor, image, div or span. IE 6 and the like only support :hover on anchors so you'll have to either wrap elements in an anchor or use JavaScript to produce hover effects.

The following works wonderfully on modern browsers. They start out with the specified opacity class, and when hovered over are set to fully opaque. One of the cool things about opacity is that you can use it in place of actual hover state graphics. I do this throughout the ITNewb website.

  1. // CSS
  2. .opacityOff:hover {
  3.     opacity:1;
  4.     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
  5.     filter:alpha(opacity=100);
  6.     zoom:1
  7. }

  1. // HTML
  2. <img src="img1.jpg" class="opacity25 opacityOff" alt="JPG Opacity 25%" />
  3. <img src="img1.gif" class="opacity50 opacityOff" alt="GIF Opacity 50%" />
  4. <img src="img1.png" class="opacity75 opacityOff" alt="PNG Opacity 75%" />

A better approach would be to use a single class that also has a :hover.

  1. // CSS
  2. .someClass {
  3.     opacity:0.25;
  4.     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=25)";
  5.     filter:alpha(opacity=25);
  6.     zoom:1
  7. }
  8. .someClass:hover {
  9.     opacity:1;
  10.     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
  11.     filter:alpha(opacity=100)
  12. }

  1. // HTML
  2. <img src="img1.jpg" class="someClass" alt="Hover Effect" />

As mentioned, IE 6 only supports :hover on anchors. Here are a few examples that work in IE 6.

  1. // Using an anchor that points to the image
  2. <a href="/img1.jpg" class="someClass"><img src="img1.jpg" alt="" /></a>
  4. // Anchor with disabled href
  5. <a href="#" class="someClass" onclick="return false"><img src="img1.jpg" alt="" /></a>

Example with JavaScript (requires two classes).

  1. // HTML
  2. <img src="img1.jpg" class="opacity25" onmouseover="this.className='opacity100'"
  3. onmouseout="this.className='opacity25'" alt="" />