Il existe une directive très pratique ou plutôt très fascinante en CSS qui permet de jouer avec l’opacité sur des images par exemples.
Ainsi on peut créer un système de rollover. En passant la souris sur l’image, elle apparaît plus nette, avec une opacité de 100%, et dès qu’on éloigne la souris de l’image, son opacité reviens à 50%. C’est comme si l’on mettait un voile opaque sur l’image.
Cela fonctionne sous tous les navigateurs récents même si pour IE il est nécessaire d’utiliser un filtre.
Le JDN réponds à cette question “Est-il possible de créer des rollovers en CSS à partir d’une seule image ?”. Il propose un solution basée sur le système d’opacité.
Cependant on peut aussi perfectionner ces rollovers avec une seule image, comme vue dans une précédente news. Ce qui rends quand même beaucoup joli, mais nécessite un tout petit peu plus de travail.