Efecto de Opacidad

Efecto de Opacidad en las imágenes

Hoy vamos aprender a utilizar la propiedad “opacity” de CSS para lograr un elegante efecto de opacidad en imágenes, ya sea en todas las del blog o solo en algunas y que funcione en la mayoría de los navegadores (Mozilla Firefox, Google Chrome, Internet explorer, Opera, Safari).

Ejemplo de transparencia del 50% de opacidad en una imagen y al pasar el cursor vuelve al 100% de su color original.

Para ello vamos a añadir los siguientes estilos, vamos a Plantilla » Edición html y presionando ctrl+f buscaremos la palabra ]]></b:skin> justo arriba de ella pegaremos lo siguiente:

#opacidad img{
filter: alpha(opacity=50);
opacity: 0.5;
}
#opacidad img:hover {
filter: alpha(opacity=100);
opacity: 1;
}

O sino también podemos definir los estilos en la misma página o entrada de la siguiente forma

<style type="text/css">

Aqui el código CSS...

</style>

Luego en la imagen que deseamos aplicar el efecto ponemos el siguiente div con la id opacidad quedando de la siguiente manera el código.

<div id='opacidad'>
<img src='http://3.bp.blogspot.com/-Ubv5ytQgQKg/Usn0tyimlXI/AAAAAAAASQk/0L5LRFSYd6U/s1600/1388988382_facebook.png'/>
</div>

El resultado será el siguiente, pasa el cursor...

Si deseamos aplicar el efecto para todas las imagenes de los post, simplemente vamos a Plantilla » Edición html y presionando ctrl+fbuscaremos la palabra .post img {

y agregamos las etiquetas de opacidad para todos los navegadores 

filter: alpha(opacity=50);
opacity: 0.5;

Y ahora deberemos crear el siguiente estilo

.post img:hover {
filter: alpha(opacity=100);
opacity: 1;
}

Y debemos pegarlo a la terminación del estilo  .post img{...} o lo podemos pegar justo arriba de la palabra ]]></b:skin>

 Aclaración  filter: alpha es la etiqueta  para que la opacidad se visualize en los navegadores de Internet Explorer de la primera versión hasta la número 8 Y opacity: es para que se visualize en todos los demás.

Efecto de opacidad en una imagen al pasar el cursor

Esta vez haremos lo mismo pero sin editar la plantilla, además con dos variantes, una es que una imagen con opacidad tome su color normal al pasar el cursor sobre ella, y otra que una imagen con color normal se muestre opaca al pasar el mouse.

Imagen con opacidad y color normal al pasar el mouse

<img style="opacity: 0.2; filter:alpha(opacity=20);" src="URL de la imagen" onmouseover="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseout="this.style.opacity=0.2;this.filters.alpha.opacity='20';"/>

Imagen normal y efecto de opacidad al pasar el mouse.

<img src="URL de la imagen" onmouseout="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseover="this.style.opacity=0.2;this.filters.alpha.opacity='20';"/>

Sólo pega el código dentro de una entrada o un elemento HTML/Javascript y cambia lo que está en rojo por la URL de la imagen.

Efecto de Opacidad

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.

Así se ve el truco (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.

Cambiar imagen por otra al pasar el cursor

Lo mejor de este truco es que se logra sin scripts, solo haciendo uso de un pequeño codigo.

Para usar este truco solo tienes que pegar en la Edición HTML de una entrada  o pagina, el siguiente codigo:

<img src="URL de la imagen UNO" onmouseover="this.src='URL de la imagen DOS';" onmouseout="this.src='URL de la imagen UNO';"/>

Reemplaza lo esta en color azul por la URL de la imagen inicial, y lo que esta en color naranja por la URL de la imagen que cambiará al pasar el mouse.

Como vez es un truco muy facil de añadir y con un poco de imaginación le puedes dar multiples usos.