a:hover img {
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +,
Safari 1.2+, Opera 9 */
filter: alpha(opacity=60); /* IE 5.5+*/
}

<!--begin of Top100 logo-->   
<div class="counter"><a href="http://top100.rambler.ru/top100/">   
<img src="http://top100-inferno.rambler.ru/%20»<br%20/>top100/banner-88x31-rambler-gray2.gif" alt="" /> alt="Rambler's Top100" width="88"  
height="31" border="0"/></a><!--end of Top100 logo -->

div.counter {
position:relative; // чтобы span позиционировался
// относительно этого элемента
width:88px;
height:31px;
}
 
.counter a { display:block; }
 
.counter a span {
position:absolute; // используем абсолютное
// позиционирование чтобы разместить
// span над изображением счетчика
top:0px;
left:0px;
width:88px;
height:31px;
display:none; // скрываем span
background:url(mask.png);
}
 
.counter a:hover span {
display:block; // показываем span
// при наведении мышки на счетчик
}
 
* html .counter a:hover span {
display:none; // IE6 не поддерживает полупрозрачные png…
}
 
* html .counter a:hover img {
filter: alpha(opacity=60); // …заменяем их фильтром
}