Efecto Hover sobre imágenes con CSS

13
9685

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

13 COMENTARIOS

  1. gracias, código estupendo,
    lo único, en css, no soy un águila, estoy programando los estilos en un css aparte, no se si tendrá que ver, pero he tenido que cambiar

    a.linkopacity:hover img {

    por

    .linkopacity:hover a img {

    sino, no me rulaba…

    y he cambiado el efecto, a que se ponga pálido cuando estás encima, me parece más estético, sino, aparecen todas las imágenes mortecinas y el diseño se «apaga mucho» supongo que dependerá de cada diseño…

    no pongo la dirección que todavía está en beta.

    gracias otra vez.

Comments are closed.