Hola a todos/as,
estoy haciendo una galeria en CSS y una lista en HTML. Lo que hace el codigo es que cuando el raton pasa por las imagenes cambia la opacidad de 80% a 1, es decir inicialmente aparecen semitransparentes y al pasar el raton por encima se ven sin opacidad. Este es mi codigo:
Código HTML:
<ul id="gallery">
<li><a href=""><img src="./img/galeria1/im1g1.jpg" width="141" height="80" alt="" border="0"></a></li>
<li><a href=""><img src="./img/galeria1/im2g1.jpg" width="141" height="80" alt="" border="0"></a></li>
<li><a href=""><img src="./img/galeria1/im3g1.jpg" width="141" height="80" alt="" border="0"></a></li>
<li><a href=""><img src="./img/galeria1/im4g1.jpg" width="141" height="80" alt="" border="0"></a></li>
</ul> Y el CSS:
Código:
#gallery {
list-style:none;
}
#gallery li {
float:left;
padding: 0.2em;
}
#gallery li a img {
border: 1px solid #333;
padding: .1em;
opacity:.80;
filter: "alpha(opacity=80)"; /* expected to work in IE 8 */
filter: alpha(opacity=80); /* IE 4-7 */
}
#gallery li a img:hover {
border-color: 1px solid #CCC;
opacity:1;
filter: "alpha(opacity=100)"; /* expected to work in IE 8 */
filter: alpha(opacity=100); /* IE 4-7 */
zoom: 1;
}
Entonces, este código funciona para todos los navegadores menos para IE, mi pregunta es ¿ el problema viene por
opacity que no lo reconoce IE? o por otro lado esta en la regla img:hover que no la soporta IE.......buen ya me decis.....
Gracias