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:
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
no funqa !
Si funciona.. y esta bien bueno.
Muy bueno el efecto y de gran ayuda
Muy bueno men, me sirvio de mucho, gracias y dejame decirte q tienes un muy buen Blog, sigue adelante.
Saludos
si bien el codigo (id) es hover este efecto se llama off o alpha segun se :/ saludos
Uno donde pone el codigo?
Es compatible con todos los navegadores? Creo que con jquery es mas efectivo
maravilloso! limpio y muy sencillo, mil gracias!! 😀
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.
hola gracias por el post……!!! esto tambien funciona para internet explorer??? o funciona bien en todos los navegadores???
marketing online
gran articulo, muchas gracias 😀
Me gusta esta algo mas simple que el Shack Hover Effect pero esta mas bueno
Genial!!! el único de 6 código que me ha funcionado…