A Very Short Introduction to CSS Opacity / Transparency

This short and sweet video will demonstrate how you use the CSS opacity property to make elements transparent / opaque. The video is only a brief guide, and misses out on one important aspect (IE support, no less!) which is covered below. We’ll also cover how you can use this for hover effects.

CSS opacity values must be between 0 and 1.0, where 0 is fully transparent, and 1.0 is fully opaque (visible). An opacity value of 0.5 denotes that the element is 50% transparent, and so on.

In order to use CSS opacity in Internet Explorer you’ll need to provide a special ‘filter’ rule, where the level of opacity is a scale of 0 to 100 (percentage), like so:

.opacity {
	/* an ugly IE hack that kicks the browser into rendering the filter: */
	*zoom: 1;

	/* for IE 5, 6, 7, 8 and 9, we need a ‘filter’ property: */
	filter: alpha(opacity=50);

	/* for everyone else: */
	opacity: 0.5;
}

Technically, if you’re supporting Firefox 0.9 and below (you’re not) you should also use -moz-opacity:0.5 (but don’t bother!)

CSS Opacity on Hover

You can use opacity in :hover pseudo-classes to make a hover effect, for example on a linked image:

a img {
	*zoom: 1;
	filter: alpha(opacity=100);
	opacity: 0.5;
}
a:hover img,
a:focus img {
	*zoom: 0.8;
	filter: alpha(opacity=80);
	opacity: 0.8;
}

Links:
Original video