CSS Opacity – 5 Faces of Transparency

Opacity –

seems like it should be an easy task, but unfortunately that is not so.

There are at least five ways to change the opacity or transparency of regions within a web-page. What is most difficult is to make opacity work well on Internet Explorer; which often has aliasing issues, and sometimes does not conform to CSS standards.

Two of the most common reasons for changing opacity are –

1. Text on images – To clearly display text on an image background, while still having part of the background image show through.
2. Hover effect – To indicate that a region is selectable. When a user hovers his mouse pointer over a selectable region, that region is made less opaque or more transparent.

5 Faces of Transparency

Below we present 5 different ways to change opacity. If you are running on Firefox, these different options may all look similar to you, however, the results will be different on Internet Explorer, including Internet Explorer 8.

Ultimately, the method that gets the best results is to use transparent PNGs. You can just skip to that section if you are not interested in looking at the other less effective alternatives.

Internet Explorer Results

Screen-shot of opacity results on Internet Explorer 8

CSS Opacity 1

In the first example, we use the standard CSS-2 opacity commands.

.css-opacity1 {
	background-color:#ffffff;

	-moz-opacity:0.5;
	-khtml-opacity: 0.5;	
	opacity:0.5; 
	filter:alpha(opacity=50);
	zoom:1; /* hasLayout for IE6 and IE7 */
}

.css-opacity1:hover {
	-moz-opacity:1.0;
	-khtml-opacity: 1.0;	

	opacity:1;
	filter:alpha(opacity=100);
}

The filter statement is for IE compatibility, while opacity is the CSS standard which is used by all other browsers (FireFox, Opera, Safari).

moz-opacity is only used in really old Mozilla browsers such as Netscape Navigator. There are few such users today, thus this statement is probably no longer necessary. The same is true of khtml-opacity which is only used in old versions of Safari (1.x).

The zoom statement is important for hasLayout issues in IE-7 and IE-6.

This standard method of opacity works well on most browsers except for Internet Explorer. If you look at the Internet Explorer results, you will see that the transparency gets applied to the text as well. This gives it a jagged and distorted appearance (aliasing).

Screen-shot of opacity results on Internet Explorer 8

CSS Opacity 2

In this second step, we experiment with the new CSS-3 standard, which includes an alpha channel.

.css-opacity2 {
	background: rgba(255, 255, 255, 0.5); 
}

.css-opacity2:hover {
	background: rgba(255, 255, 255, 1.0); 
}

This rgba method works well, but is not supported by Internet Explorer (not even Internet Explorer 8).

Further research shows that there is a new ms-filter method for opacity in IE-8.

With hopeful anticipation we add in the ms-filter statement.

.css-opacity2 {
	background-color:#ffffff;

	background: rgba(255, 255, 255, 0.5); 
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; /* IE 8 */
	zoom:1; /* so the element "hasLayout"
	/* or, to trigger "hasLayout" set a width or height */

}

.css-opacity2:hover {
	background: rgba(255, 255, 255, 1.0); 
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
	zoom:1;
}

Unfortunately, the transparency still gets applied to the text. Separating the text into a child div that is fully opaque does not resolve the issue.

Screen-shot of opacity results on Internet Explorer 8

CSS Opacity 3

In the third example, we use JavaScript to change the opacity values during run-time.

.container-pos {
	margin-bottom:20px;
	padding:20px;
	}

.css-opacity3 {
	background-color:#ffffff;
	zoom:1; /* hasLayout for IE6 and IE7 */
}

.opacity50 {
    opacity:0.5; 
    filter:alpha(opacity=50); 
}

.opacity100 {
    opacity:1.0; 
    filter:alpha(opacity=100); 
}

This is the HTML/Javascript code used on the text container

<div class="container-pos css-opacity3 opacity50" onmouseover="this.className='container-pos css-opacity3 opacity100'" onmouseout="this.className='container-pos css-opacity3 opacity50'">
<strong>CSS Opacity 3</strong> - <br/>
Using Javascript to Set Opacity for Mouse Events
</div>

Not too surprisingly, the text still looks jagged on IE.

Screen-shot of opacity results on Internet Explorer 8

CSS Opacity 4

In the fourth example, we divide the text into a separate non-child, div container, as is shown below –

<div class="container-pos css-opacity4"></div>
<div class="css-opacity4b"><strong>CSS Opacity 4</strong> - <br/>
Split the text into a separate, non-child container</div>

The first container (css-opacity4) draws a transparent background. The second (non-child) container renders the text.

.css-opacity4 {
	height:80px;
	background-color:#ffffff;
	
	opacity:0.5; 
	filter:alpha(opacity=50);
}

.css-opacity4b {
	position:relative;
	top:-100px;
	left:20px;
	width: 440px;
}

.css-opacity4:hover {
    opacity:1;
    filter:alpha(opacity=100)
}

This removes the text transparency and aliasing in the IE results, however, it is not a very viable option because the background container is decoupled from its contents, making layout extremely rigid and difficult to maintain.

Screen-shot of opacity results on Internet Explorer 8

For example, we have to manually set the width and position of the overlay text, as well as the height of the background region. In the screenshot above, you can see that we have set the width of the overlay text to be too wide.

In addition, the hover functionality does not work properly because the text container is blocking the background container. To enable flexible hover functionality, you would need to include the Javascript mouse functions in the previous section, and combine them with jQuery.

CSS Opacity 5

The generally preferred way to set opacity is through the use of transparent PNGs. First, create a transparent PNG in the background color of your choice. This can be done through an image editing program such as Photoshop or GIMP. Here is a 2px by 2px, 50% transparent, white PNG.

We apply this transparent PNG like so –

.css-opacity5 {	
	background: url("https://shibashake.com/wordpress-theme/wp-content/uploads/2009/10/overlay-sm.png") top left repeat;  
	border: none; 
}

.css-opacity5:hover {
	background-color:#ffffff;
	background-image:none;
}

This method gives us good results for most browser types including Internet Explorer. Transparency just gets applied to the background, and the text stays sharp and clear.

Screen-shot of opacity results on Internet Explorer 8

The only weakness here, is you must create the transparent PNG beforehand, using your background-color of choice. This may limit the range of transparent background colors you can use during run-time.

However, by using multiple layers, together with a white and black PNG transparent mask, it is possible to simulate different transparent background colors.

Finally, note that IE-6 only supports linked hover (a:hover), so you will need to add that to your hover statements for IE-6 compatibility.