Ich erkläre euch hier einfach und schnell, wie ihr es schafft einen Hover-Effekt in eurem WordPress Blog mit Hilfe von CSS bei euren <Img>-Elementen zu erzeugen. Ein Beispiel seht ihr zum Beispiel auf meinem Blog hier.

Falls ihr nicht wisst, was ein Hover-Effekt ist: Geht man mit der Maus über ein Element, zum Beispiel ein Bild, kann man es bewegen oder verändern lassen. Was passieren soll, könnt ihr komplett selbst bestimmen. Bei mir zoomen die Bilder ein wenig.

Anleitung um einen CSS Hover-Effekt für Bilder in WordPress zu erstellen:

Erster Schritt: Ihr öffnet den Design-Editor in eurem WordPress-Blog.

Schritt zwei: Ihr scrollt bis ans Ende eurer style.css und fügt folgenden Code ein. Um den Effekt zu verändern müsst ihr euch ggf. etwas in CSS einlesen, es ist eigentlich ganz einfach. Ihr könnt auch an den Zahlen spielen und sehen, was passiert. Speichern nicht vergessen!

Der Code fertig zum Kopieren:

.wp-pulse {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -o-transition: all 1s ease; /* IE 9 */
    -ms-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
        max-width: 100%;
}
.wp-pulse:hover {
    -webkit-transform:scale(1.03); /* Safari and Chrome */
    -moz-transform:scale(1.03); /* Firefox */
    -ms-transform:scale(1.03); /* IE 9 */
    -o-transform:scale(1.03); /* Opera */
     transform:scale(1.03);
     opacity:0.86;
}

Schritt drei: Ihr solltet das Titel-Bild bereits eingefügt haben in euren Post. Nun klickt ihr mit der Maus darauf im Editor und klickt auf den Bleistift zum bearbeiten.

Schritt vier: Ihr klappt das “Erweiterte Optionen” Menü aus und tragt in Bild-CSS-Klasse wp-pulse ein. Nun nur noch speichern und ihr haben den Hover-Effekt auf eurem Titelbild! Fertig. :mrgreen: