Efectos con opacidad al pasar el cursor sobre imágenes

Puedes hacer que una imagen se muestre semitransparente y que al pasar el cursor sobre ella, resalte mostrándose completamente opaca (lo que le da un efecto de luminosidad):

O viceversa, puedes mostrar una imagen normalmente, y hacer que se transparifique al pasar el cursor:

O, incluso, que desaparezca, aplicando el valor mínimo de opacidad (máximo de transparencia) que es 0:

Y por supuesto, puedes hacer que aparezcan "imágenes fantasma" al pasar el cursor por donde antes no había "nada":

Esto se aplica también a bloques de texto:

Pasa el cursor por aquí. Este efecto, que traigo desde Mandarin Design, funciona en Internet Explorer y en Firefox, y también en versiones actuales de Opera .

→ Para ello, vamos a decidir qué grados de transparencia queremos usar y definirlos en el CSS. Así, busca en tu plantilla ]]</b:skin> y añade antes:

div.transOFF {width: 100%;border:0; }
div.transON {width: 100%;opacity:.75;filter: alpha(opacity=75); -moz-opacity: 0.75;border:0; }
div.trans25 {width: 100%;opacity:.25;filter: alpha(opacity=25); -moz-opacity: 0.25;border:0; }
div.trans50 {width: 100%;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.50;border:0; }
div.trans0 {width: 100%;opacity:0;filter: alpha(opacity=0); -moz-opacity: 0;border:0; }

La opacidad por defecto de las imágenes es 1, o sea completamente opaco. Aquí definimos los grados de transparencia que después aplicaremos a nuestro gusto para combinar efectos. Explico las líneas:

transON: cuando le demos esta clase a nuestra imagen, se le aplicará una transparencia de 0.75; puedes establecer este valor con el grado que quieras; escoge el grado que usarás con mayor frecuencia.
transOFF: no hay transparencia definida. Es el valor por defecto 1, completamente opaco, y lo usaremos para indicar que al pasar el cursor por la imagen (o retirarlo), ha de aparecer en su estado normal.
trans25: la imagen aparecerá muy transparente, para efectos de mayor contraste.
trans50: semitransparente; como ves, podemos definir aquí cualquier grado que después queramos aplicar.
trans0: máxima transparencia: convierte la imagen en invisible.

→ Ahora, cuando queramos aplicar estos efectos sobre nuestras imágenes o bloques de texto, hemos de hacerlo así:

<div class="transOFF" onmouseover="this.className='transON'" onmouseout="this.className='transOFF'"> <img src="URL IMAGEN" /></div>

Donde:

div class="transOFF": la imagen aparece normal, con transparencia OFF, o sea ninguna. Es el valor inicial, cámbialo para que la imagen aparezca transparente.
onmouseover: indicamos la transparencia a aplicar al pasar el cursor sobre la imagen, escogiendo cualquiera de los valores que establecimos en el CSS (transON, trans25, etc).
onmouseout: indicamos cómo ha de quedar la imagen al retirar el cursor.

Combina pues los diferentes grados de transparencia para obtener efectos de luz, aparición, desaparición, o simplemente resaltar botones de enlace. ¡Que lo disfrutes!

* La foto del ejemplo es mía; representa la entrada al magnífico Refugio de Verdes, en Coristanco, comarca de Bergantiños, provincia de A Coruña. Uno de los sitios más mágicos que he visto en este mundo y en otros.

* Al fantasma de la foto no lo conozco de nada.