Wenn man vor CSS3 einen schönen „Sättigungs-Effekt“ (Wechsel von Schwarz-Weiss-Bild zu Farbe-Bild) haben wollte, konnte das ganz schön mühsam sein. Vor allem musste man zunächst zwei Versionen desselben Bilder bereitstellen: eine Schwarz-Weiss-Version und eine Farb-Version. Der übliche Weg war lange Zeit, die beiden Bilder dann per Javascript auszutauschen. Das funktionierte zwar soweit ganz gut, war aber umständlich – vor allem, wenn man mal eben ein Bild austauschen wollte. Ausserdem mussten die Besucher der Webseite zwei Bilder laden – im Idealfall wurde das Hover-Bild immerhin im voraus geladen.

Etwas später gab es dann einen handlichen CSS-Trick, der auch heute noch Anwendung findet. Die unterschiedlichen Ansichten (farbig /schwarzweiss) wurden beide in einer Bilddatei hinterlegt und als Hintergrundbild eingebaut. Das Bild wird dann zum Beispiel mithilfe eines DIV-Containers maskiert, sodass nur die eine Version (zB das Graustufen-Bild) zu sehen ist. Bei Rollover (Hover) wird dann die Position des Hintergrundbildes so geändert, dass die andere Ansicht (zB das Farb-Bild) sichtbar wird. Diese Technik wird auch heute noch verwendet, um zB die Navigationselemente von Slideshows zu definieren. Alle Einzelbilder liegen in einer Bilddatei  – einem sogn. Sprite. Welches Elemet angezeigt wird bestimmt dann das CSS über die Position.

Hover-Effekte in CSS umsetzen

Zum Glück lässt sich der gewünschte Effekt (Entsättigen eines Bildes bzw. Wechsel von Graustufen-Bild zu Farb-Bild) inzwischen per CSS3 umsetzen. Ein Bild einfach ‚dynamisch‘ per CSS zu entsättigen ist so viel einfacher und ‚handlicher‘, als jedes mal zwei unterschiedliche Versionen desselben Bildes anzulegen – insbesondere, wenn man man die Seite nicht selber aktualisiert – und ganz besonders, wenn die Seite zum Beispiel über ein CMS bzw. über WordPress oder Drupal betrieben wird.

Wozu braucht man überhaupt Hover-Effekte?

Klar. Jetzt könnte man erstmal fragen, wozu man Rollover-Effekte überhaupt benötigt? Natürlich kann man argumentieen, dass Rollover-Effekte immer nur Dekoration sind – und eigentlich keinen Nutzen darstellen. Die Diskussion möchte ich aber lieber ein anderes mal führen. Hier zunächst einfach mal ein Beispiel von einem Foto mit einem solchen Graustufen-Farbe-Rollover-Effekt:

Entsättigtes Bild mit Vollfarbe bei Rollover (mit der Maus über das Bild fahren)

Das Entsättigen von Fotos kann als Rollover-Effekt zum Beispiel für Vorschaubilder (z.B. Thumbnails) verwendet werden. Der Wechsel von der Grau- zur Farbversion ist dabei subtiler, als beispielsweise ein Zoom oder das ändern der Transparenz (opacity). Insbesondere wenn man die Vorschaubilder nicht komplett entsättigt und den Rollover-Effekt mit einer zeitlichen Verzögerung (Transition) versieht.

Halb-entsättigtes Bild mit Vollfarbe bei Rollover (mit der Maus über das Bild fahren)

Der Hover-Effekt kann über die CSS3-Funktion „filter“ bereits von den meisten aktuellen Browsern dargestellt werden Allerdings verträgt sich „filter“ leider wieder mal nicht mit dem Internet Explorer – zumindest nicht mit der aktuellsten IE-Version 11 – und auch nicht mit der 10er Version und mit Edge. Microsoft hat beim Internet Explorer ab Version 10 die früher funktionierende Anweisung filter: gray leider über Bord geworfen. Man könnte die Entsättigung nun zwar mit einer JavaScript-Datei auch für IE10+ erzwingen, aber das spare ich mir erst mal.

Auch Firefox < V.35 unterstütze die Anweisung filter nicht. Wenn man den Entsättigungs-Effekt nun wenigstens für alle anderen halbwegs aktuellen Browser einsetzen möchte, kommt man also wieder einmal um einen entsprechenden Workaround nicht drumherum. Allerdings ist dieser Workaround eher einfach zu implementieren. Man benötigt lediglich ein SVG-Bild, das den Entsättigungs-Effekt für frühere Version von Firefox (4 – 34) bereitstellt. Hier nun die Details – möglicht kompakt:

Die Farbfotos, die zunächst als Schwarz-Weiss-Bilder dargestellt werden sollen, sind hier exemplarisch mit der Klasse „desaturate“ (also Engl. „entsättigen“) ausgezeichnet.

<img src="/bilder/farbfoto.jpg" class="desaturate thumbnail">

Für fast alle Browser gibt es nun also eine CSS-Anweisung, um ein Bild zu entfärben:

.desaturate {
    filter: grayscale(100%); /* Standard */
    -webkit-filter: grayscale(100%); /* Webkit */
    filter: url(/elements/grayscale.svg#desaturate); /* Firefox 4-34 */
    filter: gray;  /* IE6-9 */
    -webkit-filter: grayscale(1); /* Old WebKit */
}

Bei Maus-Rollover (:hover) soll das Bild als ursprüngliche Farb-Version dargestellt werden – also werden in einer zweiten CSS-Anweisung die vorher gesetzten Filter aufgehoben:

.desaturate:hover {
    filter: grayscale(0%);
    filter: none;
    -webkit-filter: grayscale(0); /* Old WebKit */
}

Die SVG-Datei ist ja eigentlich kein Bild, sondern eine Sammlung von Vektoren, die im XML-Format gespeichert werden. Daher kann dieses „Bild“ auch einfach mit einem Text-Editor erzeugt und an passender Stelle gespeichert werden. Hier der Inhalt:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
    <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0  0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0 0  0  0  1 0"/>
    </filter>
</svg>

Hier noch schnell der Link zur Übersicht bei Can I Use, bei welchen Browsern die CSS-Filter funktionieren:
http://caniuse.com/#search=filter

Und hier weiterführende Lektüre zum Thema:

• „Convert Images To Black And White With CSS“ (www.demosthenes.info)

UPDATE 2017

Google Map per Rollover in Grau einfärben

Der oben beschriebene Hover-Effekt funktioniert sogar auch mit einem iframe – was extrem hilfreich sein kann, wenn man beispielsweise eine Google Map per Rollover grau einfärben (entsättigen) möchte. Hier ein funktionierendes Beispiel bei codepen.io: inklusive funktionierendem Hover-Effekt.

Google Map Grayscale Filter mit Hover-Effekt – Foto/Screenshot: codepen.io / T.Bortels/cpu20.de