CSS Filter: Bild abdunkeln (und bei mouse over aufhellen)

Mit CSS Filtern kann man Bilder im Browser verändern: Damit lassen sie sich aufhellen, abdunkeln, in Graustufen umwandeln oder mit dem Blur-Filter weichzeichnen. Das ist praktisch, weil nicht jeweils zwei verschiedene Bilder übertragen werden müssen, sondern die Umwandlung im Browser stattfindet.

Mit den CSS Filtern lassen sich Bilder daher zum Beispiel abdunkeln und bei Mausberührung (hover oder mouseover) aufhellen: Das klappt mit reinem CSS, ganz ohne Javascript!

Bild mit CSS abdunkeln

Mit dem CSS Filter “brightness” lässt sich ein Bild mit CSS abdunkeln: Das kann zum Testen direkt als Style-Anweisung in den IMG-Tag geschrieben werden. Der Wert wird in Prozent angegeben – mit dieser Anweisung wird das Bild um die Hälfte dunkler angezeigt:

<img src="bild.jpg" style="filter: brightness(50%);">

 
So sieht’s aus:

 
Das lässt sich auch mit einem Mouse-Over Effekt (oder dem CSS Hover) kombinieren: Dazu erstellt man am einfachsten eine CSS Klasse, die man dann dem Bild (oder einem anderen Element) zuweist: Der CSS Filter zum Abdunkeln funktioniert nämlich nicht nur mit Bildern, sondern zum Beispiel auch mit einem <div>: Damit würde dann zum Beispiel das Hintergrundbild, aber auch der Inhalt abgedunkelt.

Zum Testen weisen wir die CSS Klasse hier wieder dem IMG Tag zu:

<style type="text/css">
.menu { filter: brightness(80%);width:100px;height:100px; }
.menu:hover { filter: brightness(100%); }
</style>

<img class="menu" src="bild.jpg">

 
So sieht’s aus:

Durch den Brightness-Filter wird das Bild normalerweise dunkler angezeigt: Fährt man mit der Maus über das Bild, sorgt der CSS hover dafür, dass die Helligkeit “brightness” auf 100% gesetzt wird: Dann wird das Bild ganz normal angezeigt.

Da hier kein zweites Bild geladen werden muss, gibt es bei dem Effekt auch keine Verzögerungen: Die gesamte Berechnung und Änderung der Bilder findet im Browser des Besuchers statt.