Menu para redes sociais - "Efeito Opacity"

Código CSS

<style type="text/css">
img {
border: 0;
}
#menu {
width:270px;
position:relative;
height:100px;
margin:100px auto;
}
#menu a:visited, #menu a {
text-decoration:none;
color:#d00;
font-weight:bold;
#menu a:visited img, #menu a img{
filter: alpha(opacity=40);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.40; opacity:0.4;
}
#menu a:hover {
background-color:transparent;
color:#06a;
}
#menu a span {
display:none;
}
#menu a:hover span {
display:block;
position:absolute;
top:50px;
left:0;
font-size:12px;
height:18px;
padding:4px;
font-weight:normal;
color:#a40;
}
#menu a:hover img {
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1.00; opacity:1;
}
</style>


Codigo HTML

<div id="menu">

<a href="ENDEREÇO DO LINK">
<img src="ENDEREÇO DA IMAGEM" alt="" title="" />
<span>TEXTO QUE APARECE AO CLICAR NO ÍCONE</span></a>

</div>