6.6.12
Blogger: Hover-Effekte mit CSS-Filter
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);
}