Las hojas de estilo permiten evitar el uso de GIF animados mediante la inserción de sencillo código HTML. Los efectos que se obtienen gracias a los filtros son seis en total y todos se verifican cuando el ratón pasa por encima de la imagen:
Trasparency: la imagen se vuelve opaca hasta que el ratón no la toca devolviéndole la luminosidad original;
Blur: efecto desenfocado de la imagen hacia la izquierda
Light: efecto sombreado de la imagen de derecha a izquierda
Wave: efecto ondulado en la imagen
Flip horizontal: iimagen invertida hacia la izquierda
Flip vertical: imagen dada la vuelta
Para obtener los efectos de los filtros en la imagen es necesario intervenir en dos puntos del documento: dentro de la marca <HEAD> y en el SRC de la imagen.
Los ejemplos que siguen muestran el código que hay que impostar para los seis efectos citados.
A la imagen "paesaggio.jpg" se le asigna un nombre "immagine1" y un nivel de opacidad equivalente a 50. Por opaco se entiende lo que se vea la imagen en el momento de cargar la página. A niveles más bajos corresponde una imagen más desnfocada. El gestor de eventos "onmouseover" establece que en el momento en que el cursor del ratón entra en el área de imagen la misma se vuelve nítida; mientras el gestor "onmouseout" devuelve la imagen a su estado inicial cuando el cursor se mueve.
