Use the following code to set image opacity.
.imgClass {
opacity: 0.5;
filter: alpha(opacity=50);
}
For normal browser, the opacity attribute works very well. But for the amazing Internet Explorer, you gotta use the filter attribute.
Try the following for mouseover effect.
<html>
<head>
<title>Eureka!</title>
</head>
<body>
<div>
<img src="http://www.google.com.hk/images/logo_sm.gif" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
</div>
</body>
<html>
Done =)
Reference: CSS Image Opacity / Transparency
Eureka! 