Apply CSS Transparency to Images

Posted on June 7th, 2007 by Josh Stauffer

To apply CSS transparency to images add the following properties and values to the appropriate CSS selectors. An image without any filters applied to it has an opacity of 1.0. If an image has 30% opacity it also has 70% transparency. Hover your mouse over the image below for an example.

a.thumbnail img {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.50;
opacity:0.5;
}
a.thumbnail:hover img {
filter: Alpha(opacity=100, finishopacity=100, style=1);
-moz-opacity: 1.00;
opacity:1;
}