Efecto transparencia en una imagen
Usando CSS y JavaScript

Algunas veces hemos visto en algún sitio web que una imagen se ve opaca y cuando pasamos el mouse retorna a su color original. Este efecto es sencillo de hacer usando algo de CSS y un poco de javaScript.

Veamos el código completo:

Código HTML:
<html>
<head>
<title>.::Pruebas CSS::.</title>
</head>
<body>
<img src="Ghost.png" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
</body>
</html>
Primero cargamos la imagen, luego ponemos un estilo a la etiqueta y añadimos opacidad por medio de CSS: style="opacity:0.4;filter:alpha(opacity=40)", la función opacity solo funciona en Firefox y Opera.

Si observan, nada más con el código anterior ya la imagen se ve opaca, ahora haremos que cuando pongan el cursor sobre la imagen retornen los colores, para eso agregamos en el evento OnmouseOver otro estilo: onmouseover="this.style.opacity=1;this.filters.alp ha.opacity=100".

Por último cuando retiramos el cursor la imagen cambia a su estado de opacidad original, por lo tanto ponemos el mismo estilo que pusimos al principio pero en el evento OnMouseuot: onmouseout="this.style.opacity=0.4;this.filters.al pha.opacity=40"