Efecto Hover sobre imágenes con CSS
11-10-2008 Desarrollo Web, CSS 35718 hits (100 %) 12 comentariosQuizá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
Jesus Liñan
<a href="http://www.marketingonlinepanama.com">marketing online</a>
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.
Saludos