Unser Affiliate Theme ist da! Spare 10% mit dem Gutschein DRWP10 - mehr erfahren!

Bild nur mit CSS schwarz/weiß darstellen (grayscale)

css-schwarz-weiss-filter

Oftmals werden bei der Darstellung von „Partner-Logos“ die Logos in schwarz/weiß dargestellt und sobald man mit der Maus drüber fährt, werden diese bunt. Bisher brauchte man hierzu immer 2 Bild-Dateien. Einmal das Logo in Farbe und einmal das Logo in schwarz/weiß. Das hat nun ein Ende, denn durch den CSS 3 „grayscale“-Filter ist es möglich, ein Bild mit ein paar Zeilen CSS in ein schwarz/weiß Bild zu verwandeln und beim Hover entfernt man diesen Filter einfach wieder.

Demo: http://jsfiddle.net/2wfpctyL/

.grayscale {
	filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><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>#grayscale");
	filter: gray;
	-webkit-filter: grayscale(70%);
	opacity: 0.5;
	display: inline-block;
	transition: all 0.5s;
}
.grayscale:hover {
	filter: none;
	-webkit-filter: none;
	opacity:1;
}

Über André

Als Web- und Grafikdesigner arbeite ich täglich mit WordPress. Auf DRWP.de veröffentliche ich in unregelmäßigen Abständen immer wieder kleinere Snippets und Artikel, die mir bei meiner täglichen Arbeit helfen und auch für den ein oder anderen Suchenden von nicht unerheblichem Interesse sein könnten.

WordPress Affiliate ThemeAnzeige

2 Kommentare

Avatar von Harry Milatz

Harry Milatz 13. Juni 2015 um 1:23

Hi André,

hat sich da der Fehlerteufel eingeschlichen? Sollte die Klasse für das :hover nicht genauso heissen?;)

Gruss Harry

Antworten
Avatar von André

André 18. Juni 2015 um 8:38

Ich weiß nicht wovon du sprichst. :D

Danke, ist korrigiert. ;)

Antworten

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <strong>, <em>, <u>, <a href="">, <del>, <ul>, <ol>, <blockquote>. Für Code benutze bitte pastebin.com und kopiere den Link in dein Kommentar.
*
*