Foto Filter mit CSS

Bildbearbeitung mit CSS :

Hier einige Filter-Beispiele.
Ich habe alle Fotos mit Hover versehen, bei Mauskontakt seht Ihr Original-Foto.
User mit Internet-Explorer 9 (und Abwärts) sehen keine Effekte.

Das Originalfoto.
August 2015 im tiefen Nordfriesland.

---

Hier mit Grau-Filter

filter: grayscale(100%);

Ein Wert von 0% lässt das Bild unverändert.

---

Hier mit Kontrast-Filter

filter: contrast(140%);

Wert von 0% erzeugt graues Bild.
Wert 100% lässt das Bild unverändert.
über 100% dunkle Kontrast-Effekte

---

Hier mit Schatten

filter: drop-shadow(16px 16px 10px black);

Dritte Wert 10px ist für Fade-Effekt,
für weiche oder harte Schattenkanten

---

Hier mit Farbton-Rotation

filter: hue-rotate(90deg);

Wert (0deg) lässt das Bild unverändert.
Der Maximalwert ist (360deg).

---

Ursprungsfarben invertieren

filter: invert(100%);

Ein Wert von 0% lässt das Bild unverändert.
100% erzeugt komplett invertiertes Bild.

---

Transparenz

filter: opacity(50%);

Ein Wert von 0% = komplett transparent.
Wert 100% lässt das Bild unverändert.

---

Sättigung (Farbe)

filter: saturate(200%);

Ein Wert von 0% = ohne Farben.
Wert 100% lässt das Bild unverändert.
Werte über 100% = kräftigere Farben

---

Sepia-Effekt

filter: sepia(100%);

Wert 0% lässt das Bild unverändert.
Wert 100% = kompletter Sepia-Effekt

---

Bild gedreht

transform: rotate(20deg);

Wert (0deg) lässt das Bild unverändert.
Maximaler Wert (360deg).

---

Wie füge ich meinem Bild einen Effekt zu ?

Wenn das Bild im Seiteninhalt eingefügt wurde ....

- oben im Editor (Werkzeugleiste) auf "Quellcode" klicken
- dein Seiteninhalt wird nun als HTML-Code angezeigt
- nun suchen wir den HTML-Bildcode
- so sieht er aus :

<img src="Grafikadresse alt="Bild" />

Dem fügen wir nun die gewünschte Eigenschaft mit ein:

<img style="filter: sepia(100%);" src="Grafikadresse alt="Bild" />

---

Bei Mauskontakt normales Bild anzeigen ?

- bleibe in der HTML-Code-Ansicht der Seite
- füge zu Beginn im Seiteninhalt folgenden CSS-Code mit ein:

<style type="text/css">
img { transition: all 0.5s linear; }
img:hover {filter: none!important;}
</style>