Efecto de "opacidad" en las imágenes

martes, 8 de septiembre de 2009
Gracias a El Potro, de Ciudad Blogger, he descubierto un truco que le puede dar un toque mágico a una imágen.
Se trata de aplicar el efecto opacidad a una imágen, y que, al pasar el cursor por encima, ésta recupere su color original.
Aquí un ejemplo:


Para poder utilizar este efecto debes entrar a  Diseño> Edicion de HTML y pegar antes de
]]></b:skin>
el siguiente código:

/* OPACIDAD EN IMAGENES
----------------------- */
a.opacidad img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}

a.opacidad:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}

Una vez pegado este código en el sitio correspondiente, GUARDAMOS CAMBIOS

Y finalmente, para utilizar éste efecto en una imagen; ya sea dentro de una entrada o en un Elemento HTML, debes usar éste código:



<a class="opacidad" href="URL del enlace" src="URL de la imagen"><img src="URL de la imagen"></a>

Sólamente debes de sustituir la URL de la imagen dos veces, y ésto se debe a que una es para mostrar la imagen con opacidad, y la otra con el color original.

Si tu imagen no tiene URL del enlace, elimina ésta parte: href="URL del enlace"

Espero que les sirva éste truco.

Saludos!!!!

2 comentarios:

  • Uxía Romero
    Este comentario ha sido eliminado por el autor.
  • La Trucoteca

    Uxía Romero, ahora simplemente tienes que poner el código que tienes en la segunda caja (sustituyendo los datos de URL de la imagen donde la tengas alojada, el enlace a donde dirige, etc.), en la entrada, widget, tec. que quieras :)

    Saludos!

  • Ir Arriba