Efecto de Opacidad en las imágenes

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.

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.