17 noviembre 2008

Opacidad en imagen

¿
Te gustaría colocarle efecto de opacidad en las imágenes? En Gem@ nos trae la solución, con el simple efecto Rollover nos ayudara a colocarle el efecto opacidad y consiste en agregar un estilo CSS en la plantilla.
Veamos el procedimiento:



Nos vamos a la Edición HTML y buscamos ]]></b:skin> y justo ante agregaremos lo siguiente:



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; }

Se guardan los cambios y cada vez que se quiere aplicar el efecto a una imagen, haremos lo siguiente:

<a class="linkopacity" href="url-de-la-pagina" title="texto a mostrar" ><img src="url-de-la-imagen" border="0" style="border:1px solid black;" width="32" height="32" alt="Texto a mostrar"></a>

Resultado:
Yo amo a las Arepas


Pero yo le agregaría que si no quieres colocarle bordes y modificar su tamaño, solo tenemos que agregar esto <a class="linkopacity"></a> y quedaría así:

<a class="linkopacity"><img src="url-de-la-imagen"></a>

Resultado:


6 comentarios:

  1. Genial para un header que suelen quedar mejor con colores opacos.
    Abrazos enormes y buena semana

    ResponderEliminar
  2. guau ese banner y los cambios, qué bonito cariño!!!...el ícono de RSS de jean, bellísimo-
    Me has recordado de éste artilugio para las imágenes, guardo las entradas que sin interesantes, que aplicaré y luego me olvido!!!...besitos mi Antony!!!

    ResponderEliminar
  3. Te invité a participar de un concurso, http://www.noticiasinformales.com/2008/11/concurso-gan-un-webhosting-con-gndx.html. Abrazos

    ResponderEliminar
  4. Hola Marisol! Tienes razón...! Que bien queda en el header... Pronto pasare por allá a ver el concurso.

    Hola Graciela! Gracias! es muy bueno para utilizarlo... Saludos!

    ResponderEliminar
  5. seria genial si se puediera hacer con html

    ResponderEliminar
  6. Your article is write very well, I like it very much

    ResponderEliminar

¡Gracias por comentarme! No modero los comentarios porque me parece tentar contra la libertad de expresión de cada individuo, por eso le pido que no hacer comentarios con palabras obscenas, si vas a comentar como Anónimo por favor coloca tu nombre o cualquier apodo. ¡Gracias!