How to make transparent image using CSS

It’s quite easy if you want set transparency image on webpage using CSS. See the example google logo image, the image below using the same image source but using different CSS style. The first image is the default image without transparency effect and the 2nd image using transparency effect. When you do mouse over image 2, the image opacity will be changed.

Look at this code below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Transparency Images</title>
<style type="text/css">
#img-roll1 {
opacity:0.4;
filter:alpha(opacity=40)
}
#img-roll1 {
float:left;
border:#666600 1px solid;
padding:2px;
margin-bottom:10px;}
#img-roll2 {
float:right;
border:#666600 1px solid;
padding:2px;
margin-bottom:10px; }
</style>
</head>
<body>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" />
<img id="img-roll1"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"
src="http://www.google.com/intl/en_ALL/images/logo.gif" />
</body>
</html>