So blenden Sie Bilder beim Überfahren mit der Maus in WordPress aus (einfach & leicht)

Wollten Sie schon immer Ihren Website-Bildern einen kleinen Funken hinzufügen? Wir sprechen von einer kleinen, professionellen Note, die Ihre Website interaktiver erscheinen lässt, ohne abzulenken.

Bei WPBeginner haben wir festgestellt, dass ein einfacher Fade-Effekt beim Überfahren mit der Maus eine perfekte Lösung ist. Es ist eine subtile Animation, die Besucher sanft dazu ermutigt, mit Ihren visuellen Inhalten zu interagieren.

Diese kleine Anpassung kann einen großen Unterschied im Gesamtgefühl Ihrer Website bewirken und ist überraschend einfach einzurichten. Sie müssen kein Coding-Experte sein, um dies zu erreichen.

In diesem Leitfaden zeigen wir Ihnen genau, wie Sie den Bild-Fade-Effekt beim Überfahren mit der Maus in WordPress hinzufügen.

Warum Bilder beim Überfahren mit der Maus in WordPress ausblenden?

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, wie z. B. Ihr Website-Logo oder einen Call to Action.

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 der Maus darüber fahren.

Dies ermutigt die Leute, mit Ihren Bildern zu interagieren und kann der Seite sogar ein Storytelling-Element hinzufügen. Zum Beispiel können verschiedene Bilder ein- und ausgeblendet werden, während sich der Besucher auf der Seite bewegt.

Im Gegensatz zu einigen anderen Animationen ist der Fade-Bild-Effekt beim Überfahren mit der Maus subtil, sodass er das Leseerlebnis des Besuchers oder jede Bildoptimierung, die Sie vorgenommen haben, nicht negativ beeinflusst.

Mit diesen Worten zeigen wir Ihnen, wie Sie in WordPress Bilder beim Überfahren mit der Maus ausblenden können. Verwenden Sie einfach die folgenden Links, um direkt zu der von Ihnen gewünschten Methode zu springen:

• Methode 1: Hinzufügen eines Bild-Fade-Effekts beim Überfahren mit der Maus zu allen WordPress-Bildern
• Methode 2: Hinzufügen von Bild-Fade-Animationen zu einzelnen Seiten
• Methode 3: Hinzufügen von Bild-Fade-Animationen zu Beitragsbildern
• Häufig gestellte Fragen (FAQs)
• Zusätzliche Ressourcen für Bildeffekte & Verwaltung

Methode 1: Hinzufügen eines Bild-Fade-Effekts beim Überfahren mit der Maus zu allen WordPress-Bildern

Der einfachste Weg, allen Ihren Bildern einen Fade-Effekt hinzuzufügen, ist die Verwendung des kostenlosen WPCode-Plugins. Es ist das leistungsstärkste und benutzerfreundlichste Code-Snippet-Plugin für WordPress und ermöglicht es Ihnen, benutzerdefinierten Code hinzuzufügen, ohne die Dateien Ihres Themes bearbeiten zu müssen.

Dies ist viel sicherer, da das Plugin hilft, Fehler zu vermeiden, die zu häufigen WordPress-Fehlern führen können. Weitere Details zu allen Funktionen finden Sie in unserem vollständigen WPCode-Testbericht.

Experten-Tipp: Bei WPBeginner verwenden wir WPCode, um alle benutzerdefinierten Code-Snippets auf unserem Portfolio von Websites zu verwalten. Es ist eine zuverlässige Methode für uns, Funktionalität hinzuzufügen und Anpassungen sicher vorzunehmen, ohne jemals die functions.php-Datei eines Themes direkt zu bearbeiten.

Das Erste, was Sie tun müssen, ist das kostenlose WPCode-Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Gehen Sie nach der Aktivierung zu Code Snippets » Add Snippet.

Hier sehen Sie alle fertigen 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, Anhangsseiten deaktivieren und vieles mehr.

Bewegen Sie einfach den Mauszeiger über „Benutzerdefinierten Code hinzufügen“ und klicken Sie dann auf „+ Benutzerdefiniertes Snippet hinzufügen“, wenn es erscheint.

Um benutzerdefiniertes CSS zu WordPress hinzuzufügen, müssen Sie aus der Liste der Optionen, die auf dem Bildschirm angezeigt werden, „CSS-Snippet“ als Code-Typ auswählen.

Geben Sie dann auf der nächsten Seite einen Titel für den benutzerdefinierten Code-Snippet ein.

Dies kann alles sein, was Ihnen hilft, den Ausschnitt im WordPress-Dashboard zu identifizieren.

Fügen Sie im Code-Editor den folgenden Code-Schnipsel 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;
}

Dieser Code-Schnipsel lässt jedes Bild 2 Sekunden lang ausblenden, wenn der Benutzer mit der Maus darüber fährt. Um das Bild langsamer auszublenden, ersetzen Sie einfach '2s ease' durch eine höhere Zahl. Wenn Sie das Bild schneller ausblenden möchten, verwenden Sie '1s ease' oder kleiner.

Sie können die „Deckkraft“ auch höher oder niedriger machen, indem Sie die Zeile opacity: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 Fade-Effekt in jedem Browser gleich aussieht.

Wenn Sie mit dem Snippet zufrieden sind, scrollen Sie zum Abschnitt „Einfügung“. WPCode kann Ihren Code an verschiedenen Stellen hinzufügen, z. B. nach jedem Beitrag, nur im Frontend oder nur im Admin-Bereich.

Um allen Ihren Bildern einen Fade-Effekt hinzuzufügen, klicken Sie auf „Automatisch einfügen“, falls dies noch nicht ausgewählt ist. Öffnen Sie dann das Dropdown-Menü „Position“ und wählen Sie „Website-weit Header“.

Danach können Sie zum oberen Bildschirmrand scrollen und auf den Schalter „Inaktiv“ klicken, damit er zu „Aktiv“ wechselt.

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

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

Methode 2: Hinzufügen von Bild-Fade-Animationen zu einzelnen Seiten

Die Verwendung eines Fade-Effekts für jedes einzelne Bild kann ablenkend sein, insbesondere wenn Sie eine Fotogalerie auf Ihrer Website, einen Stockfoto-Shop oder eine andere Website mit vielen Bildern haben.

In diesem Sinne möchten Sie vielleicht Fade-Effekte nur auf einer bestimmten Seite oder einem bestimmten Beitrag verwenden.

Die gute Nachricht ist, dass WPCode es Ihnen ermöglicht, benutzerdefinierte Shortcodes zu erstellen. Sie können diesen Shortcode auf jeder Seite platzieren, und WordPress zeigt nur auf dieser Seite Fade-Effekte an.

Erstellen Sie dazu einfach ein benutzerdefiniertes Code-Snippet und fügen Sie den Fade-Animationscode nach demselben oben beschriebenen Prozess hinzu. Klicken Sie dann auf die Schaltfläche „Snippet speichern“.

Scrollen Sie danach zum Abschnitt „Einfügen“, aber wählen Sie diesmal „Shortcode“.

Dies erstellt einen Shortcode, den Sie zu jeder Seite, jedem Beitrag oder jedem Widget-fähigen Bereich hinzufügen können.

Gehen Sie danach fort und schalten Sie das Snippet mit demselben oben beschriebenen Prozess live.

Sie können nun zu jeder Seite, jedem Beitrag oder jedem Widget-fähigen Bereich gehen und einen neuen „Shortcode“-Block erstellen. Fügen Sie dann einfach den WPCode-Shortcode in diesen Block ein.

Weitere Informationen zum Platzieren des Shortcodes finden Sie in unserem Leitfaden zum Hinzufügen eines Shortcodes in WordPress.

Wenn das erledigt ist, klicken Sie entweder auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um den Shortcode live zu schalten. Sie können dann diese Seite, diesen Beitrag oder diesen Widget-fähigen Bereich besuchen, um den Fade-on-Mouseover-Effekt zu sehen.

Methode 3: Hinzufügen von Bild-Fade-Animationen zu Beitragsbildern

Eine weitere Option ist das Hinzufügen von Fade-Animationen zu Ihren Featured Images oder Beitrags-Thumbnails. Dies sind die Hauptbilder des Beitrags.

Indem Sie Featured Images beim Überfahren mit der Maus ausblenden, können Sie Ihre Website auffälliger und ansprechender gestalten, ohne jedes einzelne Bild in Ihrem WordPress-Blog oder auf Ihrer Website zu animieren.

Um eine Fade-Animation zu Ihren Beitrags-Thumbnails hinzuzufügen, erstellen Sie einfach ein neues benutzerdefiniertes Code-Snippet, indem Sie den gleichen Prozess wie oben beschrieben befolgen.

Fügen Sie diesmal 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;
}

Scrollen Sie danach zum Feld „Einfügen“ und wählen Sie „Automatisch einfügen“.

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

Danach können Sie den Code-Snippet mit dem gleichen Prozess wie oben beschrieben live schalten.

Jetzt können Sie mit der Maus über jedes Featured Image fahren, um die Fade-Animation in Aktion zu sehen.

Wenn Sie weitere Bild-Mausover-Effekte hinzufügen möchten, lesen Sie unseren Leitfaden zum Hinzufügen von Bild-Hover-Effekten in WordPress.

Häufig gestellte Fragen (FAQs)

Hier sind Antworten auf einige der häufigsten Fragen, die uns zum Hinzufügen von Bild-Hover-Effekten in WordPress gestellt werden.

Verlangsamt das Hinzufügen eines Fade-Effekts meine Website?

Nein, dieser CSS-basierte Fade-Effekt sollte Ihre Website nicht merklich verlangsamen. Der Code verwendet einfache CSS-Übergänge, die sehr leichtgewichtig und von modernen Webbrowsern optimiert sind.

Diese Methode ist weitaus effizienter als die Verwendung von JavaScript oder großen Animationsbibliotheken für einen so einfachen Effekt.

Wie wende ich den Fade-Effekt auf ein einzelnes, bestimmtes Bild an?

Um ein einzelnes Bild anzusprechen, können Sie ihm eine benutzerdefinierte CSS-Klasse zuweisen. Wählen Sie zuerst den Bildblock im Editor aus und suchen Sie im Bereich „Erweitert“ in den Blockeinstellungen auf der rechten Seite.

Geben Sie im Feld 'Zusätzliche CSS-Klasse(n)' einen eindeutigen Namen wie custom-fade-image ein. Ändern Sie dann Ihren WPCode-Snippet, um diese Klasse gezielt anzusprechen, z. B.:
img.custom-fade-image:hover { ... }.

Funktioniert der Mouseover-Fade-Effekt bei Bildern auch auf Mobilgeräten?

Die Aktion „Mausüberfahrt“ oder „Hover“ ist spezifisch für Desktop-Benutzer mit einem Mauszeiger. Dieser Effekt wird auf Touch-Geräten wie Smartphones oder Tablets nicht ausgelöst, da kein Cursor vorhanden ist, um über die Bilder zu fahren.

Der Code verursacht jedoch keine Probleme auf Mobilgeräten. Ihre Bilder werden einfach normal ohne Fade-Animation angezeigt.

Kann ich neben dem Ausblenden auch andere Animationseffekte verwenden?

Ja, absolut. Das Ausblenden ist nur eine von vielen Möglichkeiten, die Sie mit CSS erreichen können.

Sie können Effekte wie Zoom, Schieberegler, Graustufen erstellen oder Overlays anwenden. Weitere Ideen und Codebeispiele finden Sie in unserem detaillierten Leitfaden zum Hinzufügen von Bild-Hover-Effekten in WordPress.

Zusätzliche Ressourcen für Bildeffekte & Verwaltung

Ein einfacher Fade ist ein guter Anfang, aber es gibt viele andere Möglichkeiten, Ihre Bilder ansprechender zu gestalten. Wenn Sie fortgeschrittenere Optionen erkunden möchten, finden Sie hier einige unserer anderen Anleitungen zu Bildeffekten und -verwaltung:

• So fügen Sie Instagram-ähnliche Fotofilter in WordPress hinzu (Schritt für Schritt)
• So zeigen Sie Vorher-Nachher-Fotos in WordPress an (mit Slide-Effekt)
• So fügen Sie auf WordPress-Bildern keinen Rechtsklick hinzu
• Interaktive Bilder in WordPress erstellen
• So fügen Sie ganz einfach interaktive 360-Grad-Bilder in WordPress hinzu

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Bilder beim Überfahren mit der Maus in WordPress ausblenden können. Möglicherweise möchten Sie auch unseren Leitfaden zum Thema Organisieren von WordPress-Dateien in Mediathek-Ordnern und unsere Expertenauswahl der besten Featured Image Plugins und Tools für WordPress sehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.