Img Hover-Effekt erzeugen Titelbild bei WordPress

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:

wordpress hover effekt schritt 1

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

 

wordpress hover effekt schritt 2

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:

 

 

hover effekt schritt 3 bearbeiten

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.

 

hover effekt anleitung schritt vier

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:

Kommentar schreiben

0 Kommentare.

Kommentar schreiben