Image fade in 'n out with mouseover

DEMO

Move your cursor over the following images. With CSS filter property you can do this with out calling multiple images.

HTML

<a href="#" class="fadeit"><img src="images/smile1.jpg" width="85" height="85" border="0" /></a>
<a href="#" class="fadeit"><img src="images/smile2.jpg" width="85" height="85" border="0" /></a>
<a href="#" class="fadeit"><img src="images/smile3.jpg" width="85" height="85" border="0" /></a>

CSS

.fadeit {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}
.fadeit:hover {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}