Efecto Hover sobre imágenes con CSS

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

Comentarios Comentarios formato RSS

  1. avatar marina 2010-08-02 17:29:57 5 si bien el codigo (id) es hover este efecto se llama off o alpha segun se :/ saludos
  2. avatar Jose Raul 2010-06-11 18:23:42 4 Muy bueno men, me sirvio de mucho, gracias y dejame decirte q tienes un muy buen Blog, sigue adelante.
    Saludos
  3. avatar karloxxx 2010-04-03 21:07:37 3 Muy bueno el efecto y de gran ayuda
  4. avatar Takeo 2010-01-04 22:26:01 2 Si funciona.. y esta bien bueno.
  5. avatar CharlyGraf 2009-11-12 09:38:55 1 no funqa !

Dejar un comentario