Graustufen mit Farbwiederherstellung bei Mouseover mit CSS

Das Erreichen eines Graustufen-Erscheinungsbilds mit Farbwiederherstellung bei Mouseover ist durch verschiedene Methoden möglich , bietet browserübergreifende Kompatibilität sowohl im IE als auch in Firefox.

Methode 1: Reines CSS (Verwendung eines einfarbigen Bildes)

Diese Technik nutzt die Filtereigenschaft mit Herstellerpräfixen, um das Bild in allen unterstützten Browsern grau zu skalieren:

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%);
}

Methode 2: Reines CSS (mit zwei Bildern)

Ein anderer Ansatz beinhaltet die Verwendung von zwei Bildern: einer Graustufenversion und einer farbigen Version. Das Graustufenbild wird zunächst angezeigt und der Hover-Status wechselt zum Farbbild:

img {
  transition: all .6s ease;
}

img:hover {
  opacity: 0;
}

.grayscale {
  opacity: 1;
}

Methode 3: SVG mit CSS-Filtern

Für IE10 und moderne Browser kann Inline-SVG sein Wird zum Anwenden von Filtern verwendet, wodurch der Graustufeneffekt dynamisch gesteuert werden kann:

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

svg image:hover {
  opacity: 0;
}