Hovereffekt mit verschiedenen Farben an Bild

Stef

Hey,

ich habe auf dieser seite : http://www.svs1916.de/home.html unten im footer bilder gesehen die sich nach dem hovern mit verschiedenen farben hervorscheint.

Wie bekommt man denn dies hin ? Weil ich kenn es nur das man nur 1 farbe benutzen kann.

Stef

JR Cologne

Das wurde mit CSS3 Filtern umgesetzt. Die Bilder sind ursprünglich farbig, werden aber mit Filtern so verändert, dass sie standardmäßig grau sind.

Wenn man dann über die Bilder hovert, wird der Filter wieder entfernt und man sieht, dass das Bild farbig ist.

MDN-Eintrag über CSS3 Filter: https://developer.mozilla.org/de/docs/Web/CSS/filter

Browserunterstützung bei Caniuse: http://caniuse.com/#feat=css-filters

MrMurphy

Hallo

Für solche Effekte gibt es verschiedene Möglichkeiten.

In dem von dir verlinkten Beispiel sind die Bilder farbig hinterlegt und werden mittels der CSS-Anweisung

Code

filter: grayscale(100%);

nur mit Grautönen angezeigt. Beim hovern werden die 100% dann auf 0% geändert, mittels transition mit einem weichen Übergang.

Allerdings wird CSS filter noch nicht von allen Browsern direkt unterstützt. Bis zum IE11 geht gar nichts. Siehe zum Beispiel

http://caniuse.com/#search=filter

Gruss

MrMurphy

Stef

Hey,

aso ok. Danke.

MrMurphy :

Zitat

Für solche Effekte gibt es verschiedene Möglichkeiten.

Welche Möglichkeiten gibts denn sonst ?

Stef

Sempervivum

"Welche Möglichkeiten gibts denn sonst ?" Du kannst zwei Bilder verwenden und das bunte über das schwarzweiße legen. Dann die Deckkraft (opacity) animieren.

Stef

Hey,

aso ok. Ist auch ne gute idee.

Habe jetzt mal es so gemacht:

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Filter über Bildern</title>




	<style type="text/css">
		img{
			filter: grayscale(100);
			-webkit-filter: grayscale(100);
			transition: 1s all ease-in;
		}




		img:hover{
			filter: grayscale(0);
			-webkit-filter: grayscale(0);
		}
	</style>
</head>
<body>
	<img src="Bilder/adresse.jpg" alt="adresse">
	<img src="Bilder/error.jpg" alt="error">
	<img src="Bilder/profile.jpg" alt="profile">
</body>
</html>

Alles anzeigen

Nun aber wird dies nur in firefox ausgeführt und in chrome passiert nichts. Und im internetexplorer werden nicht mal die bilder wiedergegeben. Und in caniuse steht ja drin google chrome tut es unterstützen.
Habe ja auch diesen Prefix benutzt mit dem es doch eigentlich gehen soll?

Stef

Sempervivum

Offensichtlich muss man bei dem Parameter die Maßeinheit % angeben. Dies funktioniert bei mir:

CSS

img{                filter: grayscale(100%);
                -webkit-filter: grayscale(100%);
                transition: 1s all ease-in;
            }

            img:hover{
                filter: grayscale(0%);
                -webkit-filter: grayscale(0%);             }

https://developer.mozilla.org/de/docs/Web/CSS/filter

Stef

Hey,

danke. Jetzt funktionierts.

Aber jetzt noch ne frage: Warum werden beim ie nichtma die bilder dargestellt ?

Stef

Sempervivum

Um das zu beantworten, müsste man den HTML-Text mit dem img-Tag sehen. Oder Du postest die URL deiner Seite.

Stef

Hey,

ich erkenne keine fehler.

hier ist es nochmal:

CSS

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Filter über Bildern</title>




	<style type="text/css">
		img{
			filter: grayscale(100%);
			-webkit-filter: grayscale(100%);
			transition: 1s all ease-in;
		}




		img:hover{
			filter: grayscale(0%);
			-webkit-filter: grayscale(0%);
		}
	</style>
</head>
<body>
	<img src="Bilder/adresse.jpg" alt="adresse">
	<img src="Bilder/error.jpg" alt="error">
	<img src="Bilder/profile.jpg" alt="profile">
</body>
</html>

Alles anzeigen

MrMurphy

Hallo

Zitat

ich erkenne keine fehler

Wir auch nicht.

Bleibt nur raten.

Gruss

MrMurphy

Basi

Bei mir gehts im IE, wird an den Filtern und deiner vermutlich veralteten IE Version liegen.

Stef

Hey,

ich habe nun mal die 3 Bildersources durch Bilder aus Inet ersätzt und nun klappt es.. komisch.

Naja.

Stef

Basi

Klingt nach korrupten Pfaden

Stef

Wie ?

Sind keine koruppte Pfade. Hab die Bilder aus dem Internet.

War es wohl ein joke. ?

Jetzt mitmachen!