Bildwechsel bei Mouseover

22. Aug., 2018Divi Tutorials, WordPress

Bildwechsel bei Mouse-Over

Einen Bildwechsel bei Mouseover mit CSS erzeugen

Die Methode mit CSS hat den Vorteile das Du kein extra JavaScript benötigst und dadurch die Performance nicht drunter leidet..
Zum anderen funktioniert der Effekt auch dann, wenn im Browser JavaScript geblockt ist.

Ich zeige dir zwei Varianten anhand der folgenden Beispiele.

Variante 1:

Variante 1 – CSS-Klasse: bildwechsel_1

.bildwechsel_1 { width:300px; height:300px; background:url("HIER DEIN BILD 1"); }
.bildwechsel_1:hover { background:url("HIER DEIN BILD 2"); 
transition: 0.5s;
}

Variante 2: Mouseover mit CSS-Sprite

Den gleichen Effekt kannst du ebenfalls mit einem CSS-Sprite erzeugen. Der Vorteil hier ist, dass der Besucher nur eine Grafik laden muss. Das erhöht die Reaktionsgeschwindigkeit deiner Website und verringert die Ladezeiten.

Variante 2 – CSS-Klasse: bildwechsel_2

.bildwechsel_2 { width:300px; height:300px; background:url("HIER DEIN BILD 1") top right; }
.bildwechsel_2:hover { background:url("HIER DEIN BILD 2") bottom right;
transition: 0.5s;
}