Debo estar haciendo algo mal porque aunque lo haaga me sale mal (se ve un cachito de la imagen nada más... Te dejo el css y el html:
CSS: Cita: a.linkop img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
border: 0px;
}
a.linkop:hover img {
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
-khtml-opacity: 10;
border: 0px;
}
a.hover1 {
background: url(../images/hover1.png);
}
a.hover2 {
background: url(../images/hover2.png);
}
a.hover3 {
background: url(../images/hover3.png);
}
HTML: Cita: <div id="contenedor_buttons"><a class="linkop hover1" href="#"><img src="images/sombra.png" width="320" height="140" /></a><a class="linkop hover2" href="#"><img src="images/hover2.png" width="320" height="140" /></a><a class="linkop hover3" href="#"><img src="images/hover3.png" width="320" height="140" /></a></div>
Lo intento pero nada, no sale, y se me estropea el tamaño porque los links de las imágenes aparecen previas a pasar el ratón por encima aparecen con el borde azul ese de los links :\