Opacidad con imágenes (II)

En una entrada anterior explicaba como conseguir distintos grados de opacidad en una imagen.
En este post explicaré la forma de conseguirlo mediante CSS, esto será mucho más útil a quien quiera usar el efecto en su blog con varias imágenes a la vez, o más a menudo.
El efecto conseguido, además de quedar muy bonito estéticamente, da la posibilidad a nuestros visitantes de ver la imagen original al poner el cursor sobre la imagen opaca.

1- Incluimos este código en el CSS de la plantilla:

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; }

Si os fijáis en el código, yo he puesto "opacity" después de ".a" pero puede ponerse lo que mejor nos parezca, solo hay que recordar incluir el mismo nombre que hemos puesto, al hacer la "llamada" al CSS desde nuestra imagen: <a class="opacity"

2- Cada vez que queramos mostrar este efecto en una imagen, hemos de hacerlo así:

<a class="opacity" src="url_de_nuestra_imagen"><img src="url_de_nuestra_imagen"></a>

Incluimos dos veces la url de la imagen, una para mostrarla opaca y otra para ver la original.

Resultado



Nota:
Para incluir un enlace en la imagen, lo haríamos así:

<a class="opacity" href="dirección del enlace" src="url_de_nuestra_imagen"><img src="url_de_nuestra_imagen"></a>