Wie man Bilder bei Mouseover in WordPress einblendet (einfach & leicht)

Auch wenn es wie eine Kleinigkeit aussieht, fügen wir unseren WordPress Websites manchmal eine einfache Ein- oder Ausblendungsanimation hinzu, wenn ein Benutzer seine Maus über ein Bild bewegt. Das ist eine subtile, aber effektive Methode, um unsere Websites ansprechender und interaktiver zu gestalten.

Wir haben festgestellt, dass diese kleinen visuellen Hinweise einen großen Unterschied in der Art und Weise machen können, wie Besucher mit unseren Inhalten interagieren. Es geht nicht nur darum, die Website hübscher aussehen zu lassen – diese Animationen können die Besucher tatsächlich dazu anregen, mehr von unseren Inhalten zu entdecken.

In diesem Artikel zeigen wir Ihnen, wie Sie diesen Fade-Image-Effekt bei Mouseover in WordPress hinzufügen können.

Warum Bilder bei Mouseover in WordPress einblenden?

Animationen sind eine einfache Möglichkeit, Ihre Website interessanter zu gestalten und können sogar die Aufmerksamkeit des Besuchers auf die wichtigsten Inhalte Ihrer Seite lenken, z. B. auf Ihr Website-Logo oder einen Aufruf zum Handeln.

Es gibt viele verschiedene Möglichkeiten, CSS-Animationen in WordPress zu verwenden, aber das Hinzufügen eines Hover-Effekts zu Bildern ist besonders effektiv. Die Fade-Animation bedeutet, dass Ihre Bilder langsam erscheinen oder verschwinden, wenn Besucher mit dem Mauszeiger über sie fahren.

Dies regt die Besucher dazu an, mit den Bildern zu interagieren und kann der Seite sogar ein erzählerisches Element verleihen. Zum Beispiel können verschiedene Bilder ein- und ausgeblendet werden, wenn der Besucher sich auf der Seite bewegt.

Im Gegensatz zu einigen anderen Animationen ist das Einblenden des Bildes beim Mouseover-Effekt dezent, so dass es sich nicht negativ auf das Leseerlebnis des Besuchers oder die von Ihnen vorgenommene Bildoptimierung auswirkt.

In diesem Sinne zeigen wir Ihnen, wie Sie Ihre Bilder bei Mouseover in WordPress einblenden können. Verwenden Sie einfach die unten stehenden Links, um direkt zu der gewünschten Methode zu springen:

Methode 1: Bildausblendung bei Mouseover für alle WordPress-Bilder hinzufügen

Der einfachste Weg, all Ihren Bildern einen Einblendeffekt hinzuzufügen, ist die Verwendung von WPCode. Mit diesem kostenlosen Plugin können Sie ganz einfach benutzerdefinierten Code in WordPress hinzufügen, ohne Ihre Themedateien bearbeiten zu müssen.

Mit WPCode können auch Anfänger den Code ihrer Website bearbeiten, ohne Fehler und Tippfehler zu riskieren, die viele häufige WordPress-Fehler verursachen können.

Als Erstes müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Nach der Aktivierung gehen Sie zu Code Snippets “ Snippet hinzufügen.

Hier sehen Sie alle vorgefertigten WPCode-Snippets, die Sie zu Ihrer Website hinzufügen können. Dazu gehört ein Snippet, mit dem Sie Kommentare vollständig deaktivieren, Dateitypen hochladen können, die WordPress normalerweise nicht unterstützt, Seiten mit Anhängen deaktivieren und vieles mehr.

Bewegen Sie einfach den Mauszeigerkontakt über „Fügen Sie Ihren individuellen Code hinzu“ und klicken Sie dann auf „+ Individuelles Snippet hinzufügen“, wenn es erscheint.

Geben Sie zunächst einen Titel für das benutzerdefinierte Code-Snippet ein. Dies kann alles sein, was Ihnen hilft, das Snippet im WordPress-Dashboard zu identifizieren.

Um WordPress ein benutzerdefiniertes CSS hinzuzufügen, öffnen Sie das Dropdown-Menü „Codetyp“ und wählen Sie „CSS Snippet“.

Fügen Sie im Code-Editor den folgenden Codeschnipsel hinzu:

img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Mit diesem Codeschnipsel wird jedes Bild 2 Sekunden lang eingeblendet, wenn der Benutzer mit der Maus darüber fährt. Wenn das Bild langsamer verblassen soll, ersetzen Sie einfach „2s ease“ durch eine höhere Zahl. Wenn das Bild schneller verblassen soll, verwenden Sie „1s ease“ oder eine kleinere Zahl.

Sie können die „Deckkraft“ auch höher oder niedriger einstellen, indem Sie die Zeile Deckkraft:0,6 ändern.

Wenn Sie eine dieser Zahlen ändern, stellen Sie sicher, dass Sie sie in allen Eigenschaften (webkit, moz, ms und o) ändern, damit der Einblendeffekt in jedem Browser gleich aussieht.

Wenn Sie mit dem Snippet zufrieden sind, blättern Sie zum Abschnitt „Einfügen“. WPCode kann Ihren Code an verschiedenen Stellen einfügen, z. B. nach jedem Beitrag, nur im Frontend oder nur für Administratoren.

Um alle Bilder mit einem Überblendeffekt zu versehen, klicken Sie auf „Automatisch einfügen“, falls dies nicht bereits ausgewählt ist. Öffnen Sie dann das Dropdown-Menü „Ort“ und wählen Sie „Seitenweite Kopfzeile“.

Danach können Sie zum oberen Rand des Bildschirms scrollen und auf den Schalter „Inaktiv“ klicken, damit er sich in „Aktiv“ ändert.

Klicken Sie abschließend auf „Snippet speichern“, um das CSS-Snippet zu aktivieren.

Wenn Sie nun mit der Maus über ein beliebiges Bild auf Ihrer WordPress-Website fahren, sehen Sie den Überblendeffekt in Aktion.

Methode 2: Hinzufügen von Bildeinblendanimationen zu einzelnen Seiten

Die Verwendung eines Überblendungseffekts für jedes einzelne Bild kann ablenkend wirken, besonders wenn Sie eine Galerie auf Ihrer Website, einen Stockfoto-Shop oder eine andere Website mit vielen Bildern haben.

So können Sie Überblendeffekte nur auf einer bestimmten Seite oder einem bestimmten Beitrag verwenden.

Die gute Nachricht ist, dass Sie mit WPCode eigene Shortcodes erstellen können. Sie können diesen Shortcode auf einer beliebigen Seite platzieren, und WordPress zeigt die Einblendeffekte nur auf dieser Seite.

Erstellen Sie dazu einfach ein benutzerdefiniertes Code-Snippet und fügen Sie den Code für die Einblendanimation nach dem oben beschriebenen Verfahren ein. Klicken Sie dann auf die Schaltfläche „Snippet speichern“.

Danach blättern Sie zum Abschnitt „Einfügen“, wählen aber diesmal „Shortcode“.

Dadurch wird ein Shortcode erstellt, den Sie zu jeder Seite, jedem Beitrag oder jedem Widget-bereiten Bereich hinzufügen können.

Danach schalten Sie das Snippet nach demselben Verfahren wie oben beschrieben live.

Sie können nun zu einer beliebigen Seite, einem Beitrag oder einem Widget-bereiten Bereich gehen und einen neuen „Shortcode“-Block erstellen. Fügen Sie dann einfach den WPCode-Shortcode in diesen Block ein.

Weitere Informationen über die Platzierung des Shortcodes finden Sie in unserer Anleitung zum Hinzufügen eines Shortcodes in WordPress.

Klicken Sie anschließend entweder auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um den Shortcode zu aktivieren. Sie können dann die Seite, die Seite oder den Widget-Vorbereitungsbereich besuchen, um den Einblendungseffekt beim Überfahren mit der Maus zu sehen.

Methode 3: Hinzufügen von Bildeinblendanimationen zu vorgestellten Bildern

Eine weitere Option ist das Hinzufügen von Einblendanimationen zu Ihren hervorgehobenen Beiträgen oder Beitrags-Vorschaubildern. Dies sind die Hauptbilder des Beitrags.

Durch das Einblenden von Bildern bei Mouseover können Sie Ihre Website auffälliger und ansprechender gestalten, ohne jedes einzelne Bild auf Ihrem WordPress-Blog oder Ihrer Website zu animieren.

Um eine Fade-Animation zu Ihren Post-Thumbnails hinzuzufügen, erstellen Sie einfach ein neues benutzerdefiniertes Code-Snippet nach dem oben beschriebenen Verfahren.

Fügen Sie dieses Mal jedoch den folgenden Code in den Editor ein:

img.wp-post-image:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Danach blättern Sie zum Feld „Einfügen“ und wählen „Automatisch einfügen“.

Öffnen Sie dann das Dropdown-Menü „Standort“ und wählen Sie „Site Wide Header“.

Danach können Sie das Codeschnipsel mit dem oben beschriebenen Verfahren in Betrieb nehmen.

Jetzt können Sie mit der Maus über ein beliebiges Bild fahren, um die Überblendanimation in Aktion zu sehen.

Wenn Sie noch mehr Bild-Mouseover-Effekte hinzufügen möchten, lesen Sie unsere Anleitung zum Hinzufügen von Bild-Hover-Effekten in WordPress.

Bonuseffekte für Ihre WordPress-Bilder

Einblendeffekte sind eine unterhaltsame Möglichkeit, Bilder interessanter zu gestalten, aber es gibt noch viele weitere Möglichkeiten, Animationen in WordPress zu verwenden. So können Sie beispielsweise Flipbox-Animationen verwenden, um Text einzublenden, wenn ein Besucher mit dem Mauszeiger über ein Bild fährt, oder Zoom-Effekte, damit die Nutzer ein Bild detaillierter betrachten können.

Hier sind weitere interessante Effekte, die Sie zu Ihren Bildern hinzufügen können:

• Hinzufügen von Instagram-ähnlichen Fotofiltern in WordPress (Schritt für Schritt)
• Wie man in WordPress ein Vorher-Nachher-Foto anzeigt (mit Slide-Effekt)
• Wie man WordPress-Bilder ohne Rechtsklick hinzufügt
• Wie man interaktive Bilder in WordPress erstellt
• Wie man interaktive 360-Grad-Bilder in WordPress einfügt

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie man Bilder bei Mouseover in WordPress ausblendet. Vielleicht interessiert Sie auch unsere Anleitung zum Organisieren von WordPress-Dateien in Mediathek Ordnern und unsere Expertenauswahl der besten Hervorgehobenen Bilder Plugins und Werkzeuge für WordPress.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.