Cross Browser CSS Opacity and the JavaScript Fade / Fading Effect

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

Part 1 ) CSS Opacity

TUTORIALS INDEXDOWNLOAD TUTORIAL FILES (zip)

Cross Browser CSS Opacity andthe JavaScript Fade / Fading EffectBy Andrew Johnson May 17, 2009 (modified Aug 14, 2009)

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

1 2 Next

CSS OpacityThere has been a lot of discussion and headache over the proposedCSS 3 - opacity feature, or more specifically Internet Explorer's lackthereof 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 commotionover Microsoft's decision to pull support for the existing filter:alphasyntax in the new version (among other, things) which left many siteswith a broken opacity. Fortunately for everyone, applying transparent properties in the majorbrowsers 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 quitewell. This is good news for those of you that were able to develop your pages with a strict doc typeand minimal IE hacking. In the case of ITNewb, simply changing the gte IE 7 conditional commentto IE 7 corrected all of the blemishes in IE 8 due to IE 7 hacking apart from filter:alpha, whichrequired 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 withJavaScript 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 (thisexample 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 */

Cross Browser CSS Opacity and the JavaScript Fade / Fading Effect

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

It should be noted that as of Firefox 3.5 there is no longer support for -moz-opacity, and at this pointwe 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 to25%, 50%, 75% and fully opaque. Download the attachment above for a demo of the code in thisarticle.

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

Hover Effect

On modern browsers, the dynamic :hover pseudo-class works on just about any element, whether itbe an anchor, image, div or span. IE 6 and the like only support :hover on anchors so you'll have toeither 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 opacityclass, and when hovered over are set to fully opaque. One of the cool things about opacity is thatyou can use it in place of actual hover state graphics. I do this throughout the ITNewb website.

7. }

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

1. // HTML2. <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%" />

1. // CSS

Cross Browser CSS Opacity and the JavaScript Fade / Fading Effect

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

Part 1 ) CSS Opacity

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

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

Example with JavaScript (requires two classes).

1 2 Next

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

1. // HTML2. <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%" />

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

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

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

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

Copyright / Usage

The techniques, effects and code demonstrated inITNewb articles may be used for any purposewithout attribution (although we recommend it). Thetext, images and articles themselves are copyright ©their respective authors and may not be reproduced.

You cannot copy whole articles in any language toother sites, or services, unless permission is givento you by the author.

ITNewb itself is copyright ITNewbie, Inc. Thecopying of entire web pages, for any reason, istherefore strictly prohibited.

Cross Browser CSS Opacity and the JavaScript Fade / Fading Effect

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

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