Quizás lo hayan notado, nos referimos a un efecto que consiste en una serie de imágenes semi-transparentes que al pasar ó posar el cursor toman sus intensidad normal. Como pueden apreciar en esta imágen:
Veamos como realizar esto con una estilos. Dentro de las etiquetas <head></head> colocamos el siguiente código:
<style type="text/css">
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}
</style>
Ahora simplemente nos queda aplicarlo a nuestras imágenes. Dentro de las etiquetas <body></body> escribimos lo siguiente:
<a class="linkopacity" href="#" title="Enlace 1" >
<img src="http://mihost/img/img1.jpg" alt="Imagen 1"></a>
<a class="linkopacity" href="#" title="Enlace 2" >
<img src="http://mihost/img/img2.jpg" alt="Imagen 2"></a>
<a class="linkopacity" href="#" title="Enlace 3" >
<img src="http://mihost/img/img2.jpg" alt="Imagen 3"></a>
Vía AbeOnTech