Mil Trucos Blogger

Efecto de Opacidad en las imágenes

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Con el CSS se puede  hacer maravillas y hoy les enseñare algo practico que se puede hacer con un pequeña linea de código CSS.

Se trata de un hermoso efecto de opacidad en las imágenes, este efecto se ve en acción cuando se pasa el cursor sobre la imagen.

efecto opacidad

Para añadir este truco a tu blog, ve a Plantilla, Editar HTML, y busca lo siguiente:

<b:skin>...</b:skin>

Allí das clic en la flecha que aparece al lado de este código y busca la etiqueta  ]]></b:skin> y arriba de esta añade lo siguiente:

#social img:hover {opacity: 0.6;}

Guardas los cambios.

Ahora cada vez que quieras que una imagen tenga el efecto de opacidad pega en la edición HTML de la entrada lo siguiente:

<div id=”social”>
<img alt=”efecto opacidad”  src=”URL DE LA IMAGEN” title=”Imagen con efecto Opacidad” /></div>

Donde dice URL DE LA IMAGEN pon la url de la imagen que quieres que lleve el efecto de opacidad y listo.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

4 Comentarios

  1. abril 25, 2013    

    😀 gracias

  2. junio 21, 2013    

    Muy interesante, ya lo uso en mi blog. Gracias!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo