Verwendung von hover und filter in Bildern
In CSS gibt es viele verschiedene Möglichkeiten, um die Darstellung von Elementen auf einer Webseite zu beeinflussen. Eine davon ist die Verwendung der :hover-Pseudoklasse in Verbindung mit der filter-Eigenschaft.
#id:hover {
transition: filter .5s ease-in-out;
-webkit-filter:invert(100%) !important;
filter:invert(100%) !important;
}Der obige Code zeigt eine Anwendung dieser Technik. Mit dem :hover-Selektor wird angegeben, dass die darauf folgenden Eigenschaften nur dann angewendet werden, wenn der Mauszeiger über das betreffende Element bewegt wird. In diesem Fall wird die filter-Eigenschaft verwendet, um das Element zu invertieren. Durch die Verwendung von "invert(100%)" werden die Farben des Elements komplett invertiert.
Die transition-Eigenschaft wird verwendet, um einen glatten Übergang zwischen dem normalen und dem invertierten Zustand zu ermöglichen. Der Wert ".5s" gibt an, dass der Übergang innerhalb von 0,5 Sekunden abgeschlossen sein soll und "ease-in-out" beschreibt die Art und Weise, wie der Übergang durchgeführt wird.
Diese Technik kann verwendet werden, um die Interaktivität einer Webseite zu erhöhen und dem Benutzer eine zusätzliche visuelle Rückmeldung zu geben, wenn er mit einem Element interagiert. Es gibt jedoch viele weitere Möglichkeiten, wie die filter-Eigenschaft eingesetzt werden kann, wie z.B. das Anwenden von Schatteneffekten, Farbkorrekturen oder Unschärfe-Effekten.
Beispielsweise kann man mit dem Keyword blur(2px) das Bild unscharf machen. In unserem Code-Beispiel würde dies dann folgender Maßen aussehen:
Hier sind zusammengefasst weitere Funktionen, mit welchen man die Interaktivität von Bildern auf einer Website steigern kann:
brightness(2) verändert die Helligkeit eines Bildes
contrast(2) erzeugt einen Kontrast der Stärke 2
drop-shadow(5px 5px 3px rgba(0,0,0,0.7)) setzt einen schwarzen Schatten hinter das Bild
grayscale(1)graut das Bild aushue-rotate(45deg) rotiert den Farbwinkel des Bildes. Als maximaler Wert kann 360deg eingesetzt werden.
All diese Funktionen kann man natürlich auch kombinieren und nicht nur durch einen Hover-Effekt anzeigen lassen.
Experimentiere mit verschiedenen Werten und Kombinationen, um die gewünschte Wirkung zu erzielen.
Falls du Fragen hierzu hast, lasse mir gerne einen Kommentar unter diesem Post da!
