Efecto Hover sobre imágenes con CSS by ribosomatic

Fuente: http://www.ribosomatic.com/articulos/efecto-hover-sobre-imagenes-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

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s