Cross Browser CSS Opacity and the JavaScript Fade / Fading Effect

TUTORIALS INDEX DOWNLOAD TUTORIAL FILES (zip)

Cross Browser CSS Opacity and the JavaScript Fade / Fading Effect
By Andrew Johnson May 17, 2009 (modified Aug 14, 2009)

Using CSS and JavaScript to modify the opacity (transparency) of HTML elements and images can really open the doors when it comes to improving the functional attractiveness of web applications. In this article, I'll be exploring interoperable CSS opacity setups and the JavaScript fade / fading effect.

Part 1 ) CSS Opacity

2 Next

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

http://www.itnewb.com/tutorial/Cross-Browser-CSS-Opacity-and-the-JavaScript-Fade-Fading-Effect[2/20/2013 11:54:04 PM]

Cross Browser CSS Opacity and the JavaScript Fade / Fading Effect 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.

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

1. 2. 3. 4. 5.

// HTML < img src="img1.jpg" < img src="img1.jpg" < img src="img1.jpg" < img src="img1.jpg"

class="opacity25" alt="JPG Opacity 25%" /> class="opacity50" alt="JPG Opacity 50%" /> class="opacity75" alt="JPG Opacity 75%" /> 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

http://www.itnewb.com/tutorial/Cross-Browser-CSS-Opacity-and-the-JavaScript-Fade-Fading-Effect[2/20/2013 11:54:04 PM]

Cross Browser CSS Opacity and the JavaScript Fade / Fading Effect 2. 3. 4. 5. 6. 7. .opacityOff:hover { opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; filter:alpha(opacity=100); zoom:1 }

1. 2. 3. 4.

// HTML < img src="img1.jpg" class="opacity25 opacityOff" alt="JPG Opacity 25%" /> < img src="img1.gif" class="opacity50 opacityOff" alt="GIF Opacity 50%" /> < 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. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. // CSS .someClass { opacity:0.25; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=25)"; filter:alpha(opacity=25); zoom:1 } .someClass:hover { opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; filter:alpha(opacity=100) }

1. 2.

// HTML < 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. 2. 3. 4. 5. // <a // <a Using an anchor that points to the image href="/img1.jpg" class="someClass">< img src="img1.jpg" alt="" /></ a > Anchor with disabled href href="#" class="someClass" onclick="return false">< img src="img1.jpg" alt=""

Example with JavaScript (requires two classes).

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

Part 1 ) CSS Opacity

2 Next

Copyright / Usage
The techniques, effects and code demonstrated in ITNewb articles may be used for any purpose without attribution (although we recommend it). The text, images and articles themselves are copyright their respective authors and may not be reproduced. You cannot copy whole articles in any language to other sites, or services, unless permission is given to you by the author. ITNewb itself is copyright ITNewbie, Inc. The copying of entire web pages, for any reason, is therefore strictly prohibited.

http://www.itnewb.com/tutorial/Cross-Browser-CSS-Opacity-and-the-JavaScript-Fade-Fading-Effect[2/20/2013 11:54:04 PM]

Cross Browser CSS Opacity and the JavaScript Fade / Fading Effect

Copyright 2007-2011 ITNewbie, Inc - All Rights Reserved.

http://www.itnewb.com/tutorial/Cross-Browser-CSS-Opacity-and-the-JavaScript-Fade-Fading-Effect[2/20/2013 11:54:04 PM]