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:

Hover efecto

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