estado hover

[opticooptometrista]

hola, no se si se puede hacer, pero ahñi va

muestro un listado de imágenes lincadas con una dirección cada una, me gustaría que al pasar por encima el ratón siga viendose esta imagen pero ponerle encima una transparencia (un png al 50% de trasnaprencia con un color sólido).
¿ es posible? ¿me podeis decir cómo?

[chabri]

div img:hover{
opacity: 0.8;
}
No me acuerdo como era para IE, buscalo en internet que te sale enseguida.

o

div img:hover{
background-color: transparent;
background-color: rgba(251, 251, 251, 0.8); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr=#CCFBFBFB,endColorstr=#CCFBFBFB); /* IE6IE9 */
zoom: 1;
}

Te dejo una web para que le heches el vistazo:

http://css3generator.com/

[opticooptometrista]

muchisimas gracias, pero no es lo que busco, no he dicho que mi imagen es además un link.

esto lo que hace es un subrayado por debajo de la imagen que muestro en estado normal.

lo que quiero es que al pasar el raton por encima de mi imagen, mostrar una imagen pero que deje entrever por debajo la original.

[C2am]

Hola
Prueba jugando con este código.

Código HTML:

<div id="padre">
    <p>Acá va la imagen 1</p> 
<div id="sobreimg">
    <p>Y Acá la imagen 2 con transparencia</p>
</div>
</div>
 

Código CSS:

#padre{
    background:#f00;
    height:300px;
    position:relative;
    text-align:center;    
    width:300px;  
}
p{color:#fff;
    font-size:50px;}
#sobreimg{
    background:#aaa;
    display:none;
    height:300px;
    position: absolute; left:0; top:0;
    opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */
    width:300px;
}
#padre:hover #sobreimg{display:block;}
​
 

Aquí lo puedes ver en funcionamiento.
Saludos

[opticooptometrista]

gracias, es precisamente lo que busco, aunque ya he dicho que mi imagen es un link, creo que podré adaptarlo.

no obstante cuando lo haya probado os lo diré

gracias de nuevo