Auf einer Website können Bilder nicht nur Bilder sein. Manchmal steckt hinter ihnen gleichzeitig ein Link.
Das kann ein interner Link zu einer anderen Seite oder einem Beitrag der eigenen Website sein. Genauso kann ein Bild zu einer externen Website führen.
Mir war bei solchen Bildern wichtig, dass der Besucher eine sichtbare Rückmeldung bekommt: Dieses Bild ist nicht nur zum Anschauen da. Damit kann man etwas machen.
Also habe ich mir für verlinkte Bilder in WordPress einen CSS-Effekt gebaut.
Ein Bild soll auf eine Interaktion reagieren
Bei einem normalen Textlink ist meistens ziemlich schnell erkennbar, dass es sich um einen Link handelt. Bei einem Bild ist das nicht zwangsläufig so eindeutig.
Deshalb wollte ich eine kleine optische Reaktion haben, sobald jemand mit dem Bild interagiert.
Auf einem Computer reagiert das verlinkte Bild, wenn man mit der Maus darüberfährt. Die Farben werden etwas reduziert, das Bild wird dunkler, vergrößert sich leicht und bekommt einen farbigen Rahmen mit einem dezenten Leuchteffekt.
Beim Anklicken beziehungsweise Antippen gibt es ebenfalls eine Reaktion. Für die Bedienung mit der Tastatur habe ich zusätzlich einen sichtbaren Fokus vorgesehen.
Das Ganze ist natürlich Spielerei. Die Website funktioniert auch ohne diese Effekte. Mir gefällt es aber, wenn ein verlinktes Bild dem Besucher sichtbar mitteilt, dass es interaktiv ist.
Ohne diese Hervorhebung bleibt das Bild dagegen optisch unverändert.
Mein CSS für verlinkte Bilder
Den folgenden Code habe ich in das zusätzliche CSS meiner WordPress-Installation eingetragen:
/**
* Effekte bei Bildern mit Links
*/
a img {
transition:
filter 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
/* Desktop / Maus */
@media (hover: hover) {
a:hover img {
filter: brightness(75%) saturate(60%) !important;
transform: scale(1.02);
box-shadow:
0 0 0 3px #A94E20,
0 0 14px rgba(169, 78, 32, 0.65);
}
}
/* Smartphone / Touch */
a:active img {
filter: brightness(75%) saturate(60%) !important;
transform: scale(0.98);
box-shadow:
0 0 0 3px #A94E20,
0 0 14px rgba(169, 78, 32, 0.65);
}
/* Tastaturbedienung */
a:focus-visible img {
filter: brightness(75%) saturate(60%) !important;
box-shadow:
0 0 0 3px #A94E20,
0 0 14px rgba(169, 78, 32, 0.65);
}Was passiert bei der Maus?
Der erste Abschnitt mit a img betrifft grundsätzlich Bilder, die sich innerhalb eines Links befinden.
Mit transition lege ich fest, dass die Veränderungen von Farbe, Größe und Schatten nicht schlagartig passieren, sondern innerhalb von 0,3 Sekunden weich übergehen.
Der eigentliche Maus-Effekt steckt anschließend in einer Media Query:
@media (hover: hover)Damit wird geprüft, ob das primäre Eingabegerät überhaupt sinnvoll mit einem Hover-Zustand umgehen kann.
Fährt man auf einem solchen Gerät mit dem Mauszeiger über einen Link mit Bild, wird das Bild dunkler und weniger farbintensiv. Mit scale(1.02) wird es außerdem geringfügig vergrößert.
Der Effekt ist absichtlich klein. Ich wollte keine Bilder, die beim Berühren mit der Maus plötzlich durchs halbe Browserfenster springen.
Der farbige Rahmen
Über box-shadow bekommt das Bild zusätzlich eine optische Hervorhebung.
Der Farbwert #A94E20 bestimmt dabei den sichtbaren Rahmen. Der zweite Schatten verwendet dieselbe Grundfarbe mit Transparenz und erzeugt dadurch den etwas weicheren Leuchteffekt.
Natürlich kann man diese Werte verändern und an die Farben der eigenen Website anpassen.
Auch Stärke und Größe des Effekts sind nicht fest vorgeschrieben. Wer es dezenter möchte, reduziert die Werte. Wer einen deutlich sichtbaren Effekt möchte, kann sie erhöhen.
Touch-Geräte brauchen eine andere Lösung
Auf einem Smartphone gibt es normalerweise keinen klassischen Mauszeiger, den man erst einmal über ein Bild bewegt.
Deshalb gibt es in meinem CSS zusätzlich :active.
Während der Aktivierung wird das Bild ebenfalls dunkler und weniger gesättigt. Gleichzeitig wird es mit scale(0.98) minimal verkleinert.
Dadurch entsteht eher der Eindruck, dass das Bild beim Antippen kurz gedrückt wird.
Dieser Zustand gilt übrigens nicht ausschließlich für Smartphones. :active beschreibt grundsätzlich die Aktivierung eines Elements und kann deshalb beispielsweise auch während eines Mausklicks auftreten.
Auch an die Tastatur habe ich gedacht
Ein Link sollte nicht nur mit einer Maus bedienbar sein.
Mit :focus-visible bekommt deshalb auch ein verlinktes Bild eine sichtbare Hervorhebung, wenn der Link beispielsweise per Tastatur angesteuert wird.
Ich verwende dafür wieder die reduzierte Helligkeit und Farbsättigung sowie den Rahmen und den Leuchteffekt.
Auf eine Größenveränderung habe ich beim Fokus verzichtet. Für mich reicht dort die deutlich sichtbare Markierung.
Achtung: a img gilt ziemlich großzügig
Bei diesem Codeschnipsel sollte man wissen, dass a img nicht nur bestimmte Bilder innerhalb eines Beitrags meint.
Der Selektor trifft grundsätzlich jedes Bild, das sich innerhalb eines Links befindet und auf das die Regel angewendet werden kann.
Je nach Aufbau der Website kann darunter beispielsweise auch ein verlinktes Logo, ein Beitragsbild, eine Grafik in der Sidebar oder ein anderes Bildelement fallen.
Bei meiner Website passt das zum gewünschten Ergebnis. Wer den Effekt dagegen ausschließlich für Bilder im Beitragsinhalt verwenden möchte, sollte den Selektor auf den entsprechenden Inhaltsbereich seines Themes beschränken.
Ein mögliches Beispiel wäre bei einem passenden Theme:
.entry-content a img {
/* gewünschte Regeln */
}Welche Klasse tatsächlich richtig ist, hängt vom verwendeten Theme ab.
Warum wieder zusätzliches CSS?
Auch für diesen Effekt wollte ich weder die CSS-Dateien meines Themes direkt verändern noch eigens ein Child-Theme aufbauen.
Für ein paar Zeilen Gestaltungscode wäre mir das zu aufwendig gewesen.
Im Bereich für zusätzliches CSS kann ich die Anpassung getrennt von den eigentlichen Theme-Dateien hinterlegen. Dadurch bleibt sie bei einem normalen Update des verwendeten Themes erhalten.
Wechsle ich das Theme, muss ich allerdings daran denken, dass WordPress zusätzliches CSS themebezogen speichert. Soll der Effekt auch mit dem neuen Theme funktionieren, muss ich den Code dort entsprechend übernehmen und erneut testen.
Ein zusätzlicher Blick auf Bewegung und Barrierefreiheit
Die Animationen in meinem Beispiel sind mit 0,3 Sekunden und einer sehr kleinen Größenänderung relativ zurückhaltend.
Trotzdem können Bewegungen und Animationen für manche Menschen unangenehm sein. Wer den Code weiter verbessern möchte, kann deshalb zusätzlich berücksichtigen, ob ein Besucher in seinem Betriebssystem reduzierte Bewegung eingestellt hat.
Auch der Tastaturfokus sollte nach Änderungen am CSS immer kontrolliert werden. Ein schöner Hover-Effekt bringt wenig, wenn dafür die Tastaturbedienung nicht mehr klar erkennbar ist.
Eine kleine optische Rückmeldung
Natürlich braucht eine WordPress-Seite diesen Effekt nicht.
Ich wollte lediglich, dass verlinkte Bilder etwas deutlicher zeigen, dass hinter ihnen eine Aktion steckt.
Mit der Maus werden sie leicht größer. Beim Aktivieren reagieren sie wie ein gedrücktes Element. Bei Tastaturbedienung bleiben sie sichtbar hervorgehoben.
Das ist keine große Funktion.
Aber manchmal machen gerade solche Kleinigkeiten eine Website für mich etwas stimmiger.