Efecto opacidad en las imágenes con CSS

By: Iván Dangerfield en domingo, diciembre 29, 2013

Tal efecto de opacidad queda la mar de bien tanto en las entradas del blog, como en la columna lateral del blog, procuraremos, añadir en una imagen el efecto opacidad que con ello lograremos que al pasar el cursor por encima de la imagen opaca, vuelva a su estado original, es decir a su disposición inicial de colorido. A continuación podrás ver una demostración del truco que os presento en este post o en está entrada, espero que os guste, enjoy!

á

Método de inclusión en Blogger:

Ahora para añadir este efecto opaco en tus imágenes lo debes de añadir en Blogger por ejemplo, de la siguiente manera que os desvelo a continuación es muy fácil, ya verás que es muy sencillo!

1. En Blogger sería de está forma:
2. Ves a Blogger
3. Y añade el siguiente código CSS antes de ]]></b:skin>
4. Y luego el Html de la imagen, en una entrada o en Diseño ↔ Añadir un Gadget
5. Y elige la opción Html y Javascript
6. Copia y pega el código Html y por último, guarda el gadget.

1. Vayamos ahora a añadir los estilos CSS en tu blog!

/* Efecto opacidad en la imágenes en Aizum Blog */
a.opacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}

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

2. Por último insertamos el Html dónde desees que se vea!

<a class="opacity" href="Enlace_de_la_imagen"><img src="Aquí_URL_De_Imagen" /></a>

Get free premium widgets for your blog and website.