CAMBIAR OPACIDAD IMAGEN CON CURSOR ENCIMA

Este es un efecto que podemos obtener gracias a CSS, consiste en mostrar una imágen opaca y que al situar el cursor encima de la imágen esta se muestre de forma normal, podríamos decir que es como si la imágen original se mostrara con una tela encima. Es un efecto que queda bastante bien y que podréis emplear siempre que queráis en vuestras imagenes siguiendo estos simples pasos.

Dirijiros a Diseño->Edicion de HTML en el caso de blogger.
Buscar ]]></b:skin>, justamente encima tendremos que copiar el siguiente código:

a.opacidad img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

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


Llegado este punto ya tendremos insertada la clase que nos permitirá crear el efecto, ahora tan solo tendremos que insertar el siguiente código en el lugar que nosotros deseemos mostrar nuestro efecto.

<a class="opacity" href="URL DE LA IMAGEN"><img src="URL DE LA IMAGEN"></a>


Tendréis que sustituir donde puse URL DE LA IMAGEN por la dirección donde se encuentra la imagen que queréis mostrar.

Ejemplo:(Situar cursor encima de la imagen para ver el efecto).