5202

ein Blog über technische Fragen zu Blogger

Blogger: Hover-Effekte mit CSS-Filter

von
Vor einigen Wochen wurde eine neue CSS3-Filter Klasse vorgestellt, mit denen sich die Bildinformationen in Fotos wie in einer Bildverarbeitung manipulieren lassen. Ob das nun wirklich sinnvoll ist oder nicht sei mal dahingestellt - auf jeden Fall lassen sich damit nette Spielereien machen. Ich habe mal einige der neuen Filter in einer Hover-Spielerei verarbeitet.

Demo

Die Demo funktioniert - bis jetzt - ausschließlich in einem aktuellen Chrome-Browser ab Version 19. Die anderen Browserhersteller haben angekündigt, die CSS3-Filter ebenfalls unterstützen zu wollen. Wenn das der Fall ist, werde ich das hier nachtragen.
Hover
Fahrt mit der Mause über die Bilder um den Effekt zu sehen:

1. Schwarz/Weiß
2. Sepia
3. Verwischen
4. Kontrast
5. Sättigen
6. Invertieren
7. Farbton drehen

HTML

Wer das mal selber ausprobieren will, hier meine HTML dazu:
<img id="a1" src="http://goo.gl/4d6fr" />
<img id="a2" src="http://goo.gl/4d6fr" />
<img id="a3" src="http://goo.gl/4d6fr" />
<img id="a4" src="http://goo.gl/4d6fr" />
<img id="a5" src="http://goo.gl/4d6fr" />
<img id="a6" src="http://goo.gl/4d6fr" />
<img id="a7" src="http://goo.gl/4d6fr" />

CSS

img {
  transition: all 2s;
  -webkit-transition: all 2s; 
}
#a1:hover {
-webkit-filter: grayscale(100%);
}
#a2:hover {
-webkit-filter: sepia(100%);
}
#a3:hover {
-webkit-filter: blur(3px);
}
#a4:hover {
-webkit-filter: contrast(100%);
}
#a5:hover {
-webkit-filter: saturate(100%);
}
#a6:hover {
-webkit-filter: invert(100%);
}
#a7:hover {
-webkit-filter: hue-rotate(90deg);
}

Kommentare

Dadurch das der Effekt bis jetzt nur Chrome unterstützt ist das nur eine nette Spielerei, mehr nicht - aber ich denke, CSS-Filter wird mal eine wichtige und vielgenutzte Eigenschaft werden. Was denkt ihr?