Ya sabemos que Internet Explorer no respeta los estándares. Muchas veces tenemos que recurrir a Javascript para lograr algún efecto crossbrowser, pero hay que estar atentos porque a veces sólo con una liñita de CSS (y filtros nativos de IE) podemos llevar a cabo efectos de forma sencilla.

Algo muy utilizado es el efecto de opacidad, para dejar ver un fondo, destacar elementos, etc. No hace falta que te descargues un plugin de jQuery; aprende cómo usar el filtro de opacidad nativo de IE en un par de segundos.

La verdad que no hay mucho que explicar, por un lado ponemos la expresión que entenderán los navegadores “como la gente” y luego la explicación para el “hermano bobo”, Internet Explorer (ya sé, no hacía falta aclarar ):

img {
  opacity:1; /* NAVEGADORES "EN SERIO" */
  filter: alpha(opacity=100); /* IE */
}

img:hover {
  opacity:0.8; /* NAVEGADORES "EN SERIO" */
	filter: alpha(opacity=80); /* IE */
}

Nótese que Interné Esplorer usa otro formato para la opacidad, que va de 0 a 100 y no de 0.0 a 1 como los demás.

Este párrafo es una demostración del efecto

¡Listo! Ya tienes tu efecto de opacidad crossbrowser sólo con CSS, incluso en IE