Niveaux de gris avec restauration des couleurs au survol de la souris à l'aide de CSS

Obtenir une apparence en niveaux de gris avec restauration des couleurs au survol de la souris est possible grâce à diverses méthodes , offrant une compatibilité entre navigateurs dans IE et Firefox.

Méthode 1 : CSS pur (en utilisant une seule couleur Image)

Cette technique utilise la propriété filter avec les préfixes du fournisseur pour mettre en niveaux de gris l'image dans tous les navigateurs pris en charge :

img.grayscale {
  filter: url("data:image/svg xml;utf8, ..."); /* Firefox 3.5  */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19 , Safari 6  */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

Méthode 2 : CSS pur (utilisation de deux images)

Une autre approche consiste à utiliser deux images : une version en niveaux de gris et une version colorée. L'image en niveaux de gris est initialement affichée et l'état de survol passe à l'image colorée :

img {
  transition: all .6s ease;
}

img:hover {
  opacity: 0;
}

.grayscale {
  opacity: 1;
}

Méthode 3 : SVG avec filtres CSS

Pour IE10 et les navigateurs modernes, le SVG en ligne peut être utilisé pour appliquer des filtres, permettant de contrôler dynamiquement l'effet de niveaux de gris :

svg image {
  transition: all .6s ease;
}

svg image:hover {
  opacity: 0;
}