So fügen Sie Bild-Hover-Effekte in WordPress hinzu (Schritt für Schritt)

Wir wissen, wie viel Aufwand in die Auswahl der perfekten Bilder für Ihre Website fließt. Aber manchmal können selbst die besten Fotos etwas statisch wirken und die volle Aufmerksamkeit eines Besuchers nicht fesseln.

Das Hinzufügen einer einfachen Hover-Animation kann das kleine Detail sein, das Ihre Website professioneller und ansprechender wirken lässt. Viele glauben, dass dies benutzerdefinierten Code erfordert, aber wir haben mehrere einfache Möglichkeiten gefunden, dies bei unseren eigenen Projekten ohne jegliche Programmierung zu tun.

In diesem Artikel führen wir Sie durch fünf einfache, schrittweise Methoden, um schöne Bild-Hover-Effekte in WordPress hinzuzufügen. Wir behandeln alles von einfachen Überblendungen bis hin zu interaktiven Flipboxen.

Warum Bild-Hover-Effekte in WordPress verwenden?

Bild-Hover-Effekte ermöglichen es Ihnen, kurze Animationen zu Ihren Bildern hinzuzufügen, wie z. B. Zooms, Fades, Popups und mehr. Dies macht Ihre Bilder interessanter und ansprechender, auch wenn eine Seite viele Bilder enthält.

Sie können Hover-Effekte auch verwenden, um die Aufmerksamkeit des Besuchers auf die wichtigsten Inhalte zu lenken. Sie könnten zum Beispiel CSS-Animationen verwenden, um Ihr Website-Logo oder einen Call-to-Action hervorzuheben.

Tauchen wir ein in 5 anfängerfreundliche Möglichkeiten, verschiedene Bild-Hover-Effekte zu Ihrer WordPress-Website hinzuzufügen. Verwenden Sie einfach die Schnelllinks unten, um direkt zu dem Effekt zu springen, den Sie verwenden möchten:

• Option 1: Flipbox-Effekte in WordPress hinzufügen (Schnell und einfach)
• Option 2: Bildzoom- und Vergrößerungseffekte hinzufügen (am besten für Online-Shops)
• Option 3: Bilder beim Überfahren mit der Maus in WordPress ausblenden (am besten für die Leistung)
• Option 4: Mehrere Bild-Hover-Effekte zu WordPress hinzufügen (am anpassbarsten)
• Option 5: Bild-Hover-Popup-Effekte mit einem visuellen CSS-Editor hinzufügen
• Häufig gestellte Fragen zu Bild-Hover-Effekten
• Erfahren Sie mehr Wege, um Bilder in WordPress zu verwenden und zu verwalten

Option 1: Flipbox-Effekte in WordPress hinzufügen (Schnell und einfach)

Der einfachste Weg, Hover-Effekte zu WordPress hinzuzufügen, ist die Verwendung von Flipboxen. Eine Flipbox ist einfach eine Box, die sich dreht, wenn Sie mit der Maus darüber fahren. Dies ermöglicht es Ihnen, ein anderes Bild, einen anderen Text oder einen anderen Call-to-Action beim Überfahren mit der Maus anzuzeigen.

Wenn Sie Fotograf sind, könnten Sie auf der einen Seite der Flipbox ein Foto und auf der anderen Seite Informationen über das Kameramodell oder die Auflösung anzeigen.

Wenn Sie digitale Kunst oder Grafiken online verkaufen, können Sie sogar einen Button hinzufügen, den Besucher anklicken können, um dieses Foto zu kaufen.

Der einfachste Weg, Flipboxen zu erstellen, ist die Verwendung von Flipbox – Awesomes Flip Boxes Image Overlay. Dieses kostenlose Plugin bietet mehrere verschiedene Flipbox-Stile mit einer Mischung aus Bildern, Text und Call-to-Action-Buttons.

Das erste, was Sie tun müssen, ist das Flipbox-Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Sobald das Plugin installiert und aktiviert ist, können Sie Ihre erste Flipbox erstellen, indem Sie zu Flip Box » Neu erstellen gehen.

Dies zeigt alle verschiedenen Vorlagen an, die Sie verwenden können.

Um ein Design auszuwählen, klicken Sie auf die Schaltfläche 'Stil erstellen'.

Geben Sie im erscheinenden Popup einen Namen für das Flipbox-Design ein. Dies dient nur Ihrer Referenz, Sie können also verwenden, was Sie möchten.

Sie können auch auswählen, welches Layout Sie verwenden möchten, indem Sie auf 1., 2. oder 3. klicken.

Nach der Auswahl eines Flipbox-Stils können Sie Schriftarten, Abstände und Ränder ändern.

Sie können dann Text, Bilder und Icons zu beiden Seiten der Flipbox hinzufügen.

Wenn Sie mit dem Aussehen der Flipbox zufrieden sind, möchten Sie vielleicht weitere Boxen hinzufügen, indem Sie im Abschnitt 'Neue Flipboxen hinzufügen' auf das '+' klicken.

Dies ermöglicht es Ihnen, mehrere Flipboxen mit demselben Stil zu erstellen und sie dann in Spalten und Zeilen zu organisieren.

Zum Beispiel könnten Sie für jeden Preisplan eine Flipbox erstellen.

Käufer können dann mit der Maus über einen Plan fahren, um die Kosten zu sehen.

Wenn Sie mit den Hover-Animationen zufrieden sind, können Sie sie mit einem Shortcode, den das Plugin automatisch bereitstellt, zu jeder Seite, jedem Beitrag oder jedem Widget-fähigen Bereich hinzufügen.

Für Schritt-für-Schritt-Anleitungen siehe unseren Leitfaden zum Erstellen von Flipbox-Overlays und -Hovers in WordPress unter Erstellen von Flipbox-Overlays und -Hovers.

Option 2: Bildzoom- und Vergrößerungseffekte hinzufügen (am besten für Online-Shops)

Zoom-Effekte ermöglichen es Benutzern, Details zu sehen, die normalerweise nicht sichtbar wären. Wenn Sie einen E-Commerce-Shop oder einen Online-Marktplatz haben, können Käufer so ein Produkt detaillierter erkunden, was zu mehr Verkäufen führen kann.

Zoom-Effekte können Ihrem Website auch mehr Interaktion und Engagement verleihen.

Zum Beispiel könnten Sie einfache Rätsel und Spiele erstellen, die Besucher herausfordern, kleine Details in Ihren Bildern zu erkennen. Dies kann sie länger auf Ihrer Website halten, was Ihre Seitenaufrufe erhöht und die Absprungrate verringert.

Das beste WordPress-Plugin zum Hinzufügen von Bildzoom- und Vergrößerungseffekten ist WP Image Zoom.

Dieses Hover-Effekt-Plugin ermöglicht es Ihnen, anzupassen, wie der Zoom-Effekt auf Ihrer gesamten WordPress-Website aussieht und funktioniert. Sie können dann den Zoom für jedes Bild aktivieren.

Wir werden in dieser Anleitung die kostenlose Version verwenden, aber wenn Sie mehr Anpassungsoptionen wünschen, sollten Sie sich WP Image Zoom Pro ansehen. Weitere Details finden Sie in unserem WP Image Zoom Testbericht.

Installieren und aktivieren Sie zuerst das WP Image Zoom -Plugin. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Nach der Aktivierung müssen Sie im WordPress-Admin-Menü zu WP Image Zoom » Zoom Settings navigieren. Wenn es nicht bereits ausgewählt ist, klicken Sie auf „Zoom Settings“.

Zunächst können Sie zwischen verschiedenen Linsenformen wählen.

Sie können auch einen Cursortyp auswählen, einen Animationseffekt einstellen, das Zoomen beim Überfahren mit der Maus oder beim Klicken aktivieren und eine Zoomstufe definieren.

Wenn Sie mit der Einrichtung des Zooms zufrieden sind, können Sie den Effekt zu jedem Bild hinzufügen. Klicken Sie im Gutenberg-Blockeditor, um das Bild auszuwählen, dem Sie einen Zoomeffekt hinzufügen möchten. Oder laden Sie zuerst ein Bild in WordPress hoch.

Wählen Sie im rechten Menü die Schaltfläche 'mit Zoom'.

Wenn Sie WooCommerce verwenden, können Sie in den Einstellungen des Plugins das Zoomen für alle Ihre Produktbilder aktivieren. Dies ist ideal, wenn Sie das Zoomen in Ihrem gesamten Online-Shop aktivieren möchten, ohne jedes Produkt einzeln aktualisieren zu müssen.

Im Tab „Allgemeine Einstellungen“ aktivieren Sie das Kontrollkästchen „Zoom aktivieren…“, und Kunden können jedes Produktbild vergrößern.

Für weitere Details siehe unseren Leitfaden zum Hinzufügen von Vergrößerungs-Zooms für Bilder in WordPress unter how to add magnifying zoom for images in WordPress.

Option 3: Bilder beim Überfahren mit der Maus in WordPress ausblenden (am besten für die Leistung)

Eine weitere Option ist eine einfache Überblendanimation, bei der Ihre Bilder langsam erscheinen oder verschwinden, wenn ein Besucher mit der Maus darüber fährt. Dies ist eine großartige Möglichkeit, Bilder hervorzuheben, während sich der Benutzer auf der Seite bewegt.

Sie können diesen Effekt verwenden, um den Besucher durch Ihre Inhalte zu führen oder sogar ein Storytelling-Element zu einem Beitrag hinzuzufügen.

Im Gegensatz zu einigen komplexen Animationen ist der Überblendeffekt sehr subtil. Er beeinträchtigt die Lesbarkeit nicht negativ und stört Ihre Bemühungen zur Bildoptimierung nicht.

Dies macht es zu einer perfekten Wahl für Seiten mit vielen hochauflösenden Fotos.

Der einfachste Weg, diesen Effekt hinzuzufügen, ist die Verwendung des kostenlosen WPCode-Plugins. Es ermöglicht Ihnen, benutzerdefiniertes CSS hinzuzufügen, ohne Ihre Theme-Dateien direkt bearbeiten zu müssen, was viel sicherer ist.

Hier bei WPBeginner verwenden wir WPCode, um alle benutzerdefinierten Snippets zu verwalten, die unsere Website antreiben. Es ist ein zuverlässiges Tool, das wir für das Hinzufügen jeglicher Art von benutzerdefiniertem Code empfehlen. Weitere Details finden Sie in unserem vollständigen WPCode-Testbericht.

Die vollständigen Anweisungen zur Verwendung von WPCode für diesen Effekt finden Sie in unserem Leitfaden zum Ausblenden von Bildern beim Überfahren mit der Maus in WordPress.

Option 4: Mehrere Bild-Hover-Effekte zu WordPress hinzufügen (am anpassbarsten)

Möglicherweise möchten Sie mehrere verschiedene Bild-Hover-Effekte auf Ihrer Website verwenden. Wenn Sie beispielsweise viele Bildergalerien haben, möchten Sie diese Fotos möglicherweise auf unterschiedliche und interessante Weise animieren.

Der beste Weg, um mehrere Hover-Effekte zu WordPress hinzuzufügen, ist die Verwendung von Image Hover Effects Ultimate. Dieses kostenlose Plugin unterstützt eine breite Palette von Effekten, die Sie an Ihre Bedürfnisse anpassen können.

Das erste, was Sie tun müssen, ist, das Plugin Image Hover Effects Ultimate zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Wählen Sie nach der Aktivierung im WordPress-Dashboard „Image Hover“. Sie sehen nun alle verschiedenen Arten von Hover-Effekten, die Sie verwenden können.

Für diese Anleitung wählen wir 'Caption Effects', das animierten Text über einem Bild hinzufügt.

Sie können jede Art von Hover-Effekt erstellen, die Sie möchten, obwohl die angezeigten Optionen variieren können.

Nach dem Klicken auf „Beschriftungseffekte“ sehen Sie alle verschiedenen Stile, die Sie verwenden können.

Fahren Sie einfach mit der Maus über einen Stil, um eine Vorschau darauf zu sehen, wie die Animation aussehen wird.

Wenn Sie einen Stil gefunden haben, der Ihnen gefällt, klicken Sie auf dessen Schaltfläche „Stil erstellen“.

Dies öffnet ein Popup, in dem Sie das genaue Layout auswählen können, das Sie verwenden möchten. Gehen Sie einfach hin und klicken Sie auf 1., 2. oder 3.

Wenn Sie damit fertig sind, geben Sie einen Titel in das Feld „Name“ ein. Dies dient nur Ihrer Information, sodass Sie alles verwenden können, was Ihnen hilft, das animierte Bild in Ihrem WordPress-Dashboard zu identifizieren.

Klicken Sie danach auf „Speichern“.

Dies führt Sie zu einem Bildschirm, auf dem Sie den Hover-Effekt anpassen können. Dazu gehören die Änderung der Breite und Höhe des Inhalts, die Erhöhung des Abstands und das Hinzufügen eines Schattenfelds.

Während Sie Änderungen vornehmen, wird die Live-Vorschau automatisch aktualisiert, sodass Sie verschiedene Einstellungen ausprobieren können, um zu sehen, was am besten aussieht.

Bei einigen Hover-Effekten können Sie die Richtung des Effekts ändern.

Im folgenden Bild ändern wir beispielsweise die Richtung des 'Blinds'-Effekts, sodass er nach rechts geht.

Sie können den Effekt auch schneller oder langsamer machen, indem Sie den Schieberegler „Effektzeit“ verschieben. Wenn Sie eine höhere Zahl verwenden, dauert der Effekt länger. Wenn Sie die Zahl kleiner machen, ist der Effekt schneller und kürzer.

Wenn Sie eine bestimmte Zahl im Sinn haben, können Sie diese in das Feld neben dem Schieberegler „Effektzeit“ eingeben.

Wenn Sie mit der Einrichtung des Effekts zufrieden sind, ist es Zeit, Inhalte hinzuzufügen.

Um dies zu tun, fahren Sie mit der Maus über den Abschnitt „Vorschau“ und klicken Sie auf die Schaltfläche „Bearbeiten“, wenn sie erscheint.

Dies öffnet ein Popup, in dem Sie einen Titel und eine kurze Beschreibung eingeben können.

Dies ist der Inhalt, der angezeigt wird, wenn ein Besucher mit der Maus über das Bild fährt.

Danach können Sie das Standardbild durch Ihr eigenes Bild ersetzen.

Fahren Sie einfach mit der Maus über das Platzhalterfoto und klicken Sie dann auf „Bild auswählen“, wenn es erscheint.

Sie können nun entweder ein Bild aus der WordPress-Mediathek auswählen oder eine neue Datei von Ihrem Computer hochladen.

Manchmal verwenden Sie Hover-Effekte, um Personen zu anderen Bereichen Ihres WordPress-Blogs oder Ihrer Website zu leiten. Wenn Sie beispielsweise einen Online-Shop betreiben, können Sie einen Link zu dem im Bild gezeigten Produkt hinzufügen.

Dies können Sie tun, indem Sie eine CTA-Schaltfläche hinzufügen, die unter der Kurzbeschreibung erscheint.

Um zu beginnen, fügen Sie die URL in das Feld 'Link' ein.

Geben Sie dann Ihre Nachricht ein, indem Sie in das Feld 'Button-Text' tippen.

Wenn Sie mit den eingegebenen Informationen zufrieden sind, klicken Sie auf „Senden“.

Nachdem Sie nun Text hinzugefügt haben, ist es eine gute Idee, auf den Tab 'Typografie' zu klicken.

Hier können Sie die Schriftgröße ändern, einen Textschatten hinzufügen, die Ränder größer oder kleiner machen und vieles mehr.

Wenn Sie eine CTA-Schaltfläche verwenden, stellen Sie sicher, dass Sie auf „Schaltflächeneinstellungen“ klicken, um diesen Abschnitt zu erweitern.

Hier können Sie ändern, wie der Button in seinem Standard- und „Hover“-Zustand aussieht, d. h. wie er aussieht, wenn der Besucher mit der Maus darüber fährt. Sie können auch die Ausrichtung des Buttons ändern.

Die meisten dieser Einstellungen sind unkompliziert, daher lohnt es sich, sie durchzusehen, um zu sehen, welche verschiedenen Arten von Effekten Sie erstellen können.

Wenn Sie mit der Vorschau zufrieden sind, klicken Sie auf „Speichern“, um Ihre Änderungen zu speichern.

Möchten Sie eine Zeile oder Spalte mit animierten Bildern erstellen?

Zum Beispiel könnten Sie Bild-Hover-Effekte verwenden, um die besten Funktionen Ihres Produkts zu bewerben. Im folgenden Bild kann der Besucher über jedes Bild fahren, um mehr über eine andere Funktion zu erfahren.

Möchten Sie eine ganze Reihe oder Galerie dieser animierten Bilder erstellen? Kein Problem. Um ein weiteres hinzuzufügen, scrollen Sie einfach wieder nach oben zum Abschnitt „Neues Bild-Hover hinzufügen“.

Klicken Sie hier auf die Schaltfläche „+“.

Dies öffnet ein Popup, in dem Sie einen neuen Bild-Hover-Effekt erstellen können, indem Sie denselben oben beschriebenen Prozess befolgen.

Wenn Sie mit der Konfiguration des Effekts zufrieden sind, klicken Sie auf die Schaltfläche „Senden“, um Ihre Änderungen zu speichern.

Um weitere Hover-Effekte zu erstellen, wiederholen Sie einfach den gleichen Vorgang wie oben beschrieben.

Wenn Sie mit der Einrichtung der Effekte zufrieden sind, scrollen Sie zum Feld 'Shortcode'. Sie können diesen Hover-Effekt zu jeder Seite oder jedem Beitrag hinzufügen, indem Sie diesen Code kopieren und einfügen.

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

Option 5: Bild-Hover-Popup-Effekte mit einem visuellen CSS-Editor hinzufügen

Viele der oben genannten Plugins ermöglichen es Ihnen, erweiterte animierte Bilder wie Flipboxen zu erstellen und sie dann per Shortcode auf einer Seite zu platzieren. Manchmal möchten Sie jedoch einen Hover-Effekt zu einem Bild hinzufügen, das sich bereits auf der Seite befindet.

In diesem Fall können Sie ein WordPress Custom CSS Plugin verwenden. Dies ermöglicht es Ihnen, visuelle Änderungen an Ihren Bildern vorzunehmen, ohne programmieren zu müssen, und Sie müssen auch keine Hover-Effekte separat im WordPress-Dashboard erstellen.

Hier empfehlen wir die Verwendung von CSS Hero. Dieses Plugin ermöglicht es Ihnen, fast jeden einzelnen CSS-Stil auf Ihrer WordPress-Website mit einem visuellen Editor zu bearbeiten. Es enthält auch integrierte Hover-Effekte, die Sie mit einem Klick auf Bilder anwenden können.

Das erste, was Sie tun müssen, ist das CSS Hero Plugin zu installieren und zu aktivieren. Weitere Details zur Installation eines Plugins finden Sie in unserem Leitfaden zur Installation eines WordPress-Plugins.

Sobald das Plugin installiert ist, müssen Sie auf die Schaltfläche 'Weiter zur Produktaktivierung' klicken.

Dies führt Sie zur Website von CSS Hero, wo Sie sich in Ihr Konto einloggen und einen Lizenzschlüssel erhalten können. Folgen Sie einfach den Anweisungen auf dem Bildschirm, und Sie werden in wenigen Klicks zu Ihrer Website zurückgeleitet.

Öffnen Sie anschließend die Seite oder den Beitrag, der das zu animierende Bild enthält. Klicken Sie dann in der WordPress-Admin-Leiste auf „CSS Hero“.

Dies öffnet diese Seite oder diesen Beitrag im CSS Hero-Editor.

Hier öffnet ein Klick auf ein beliebiges Inhaltselement ein Panel mit allen Einstellungen, die Sie zur Anpassung dieses Inhalts verwenden können. Mit diesen Worten, klicken Sie einfach, um ein beliebiges Bild auszuwählen.

Wählen Sie im linken Menü den Tab „Snippets“ aus.

Klicken Sie dann auf „Hover-Effekte“. Sie sehen nun alle verschiedenen CSS-Effekte.

Um einen Effekt in der Vorschau anzuzeigen, fahren Sie einfach mit der Maus über dessen blaue Schaltfläche im linken Menü.

Wenn Sie einen Effekt gefunden haben, den Sie verwenden möchten, klicken Sie einfach auf 'Anwenden'.

Wichtig: Standardmäßig wendet CSS Hero diesen Hover-Effekt auf jedes Bild auf der Seite an. Dies ist großartig, um einen einheitlichen Stil zu schaffen, aber wenn Sie nur ein einzelnes, bestimmtes Bild animieren möchten, dann ist eine der anderen Plugin-Methoden in diesem Leitfaden möglicherweise besser geeignet.

Um diese Änderung live zu schalten, klicken Sie auf die Schaltfläche „Speichern & Veröffentlichen“.

Häufig gestellte Fragen zu Bild-Hover-Effekten

Nachdem wir Tausende von WordPress-Benutzern geholfen haben, haben wir fast jede Frage gehört, die es zum Hinzufügen interaktiver Elemente zu einer Website gibt. Hier sind einige der häufigsten Fragen, die wir zu Bild-Hover-Effekten erhalten.

Funktionieren Bild-Hover-Effekte auf Mobilgeräten?

Hover-Effekte sind für Mauszeiger konzipiert, daher funktionieren sie nicht auf Touch-Geräten wie Smartphones und Tablets. Auf Mobilgeräten wird das Bild normalerweise nur in seinem Standardzustand ohne Animation angezeigt.

Einige Plugins bieten Fallback-Optionen, wie z. B. das Auslösen einer Animation beim ersten Tippen. Aus diesem Grund empfehlen wir immer, Ihre Seiten auf einem Smartphone oder Tablet zu überprüfen, um genau zu sehen, wie Ihre Bilder für mobile Besucher angezeigt werden.

Dies sorgt für ein großartiges Erlebnis für alle, unabhängig vom verwendeten Gerät! 👍

Verlangsamen Bild-Hover-Effekte meine Website?

Die meisten modernen Hover-Effekte werden mit CSS erstellt, was sehr leichtgewichtig und effizient ist. Bei Verwendung eines hochwertigen Plugins sollten diese Effekte keine spürbaren Auswirkungen auf die Geschwindigkeit oder Leistung Ihrer Website haben.

Kann ich Bild-Hover-Effekte ohne Plugin hinzufügen?

Ja, es ist möglich, Bild-Hover-Effekte durch Schreiben Ihres eigenen benutzerdefinierten CSS-Codes hinzuzufügen. Diese Methode erfordert jedoch technisches Wissen und beinhaltet die Bearbeitung Ihrer Theme-Dateien, was für Anfänger riskant sein kann.

Die Verwendung eines Plugins ist für die meisten Benutzer die sicherste und einfachste Methode, da es den gesamten Code für Sie übernimmt.

Erfahren Sie mehr Wege, um Bilder in WordPress zu verwenden und zu verwalten

Bild-Hover-Effekte sind nicht die einzige Möglichkeit, Ihrer Website mehr visuelles Interesse zu verleihen. Hier sind weitere Tutorials, die Sie zum Thema Bilder in WordPress lesen können:

• Interaktive Bilder in WordPress erstellen
• So vergrößern Sie Bilder beim Anklicken in WordPress (3 einfache Methoden)
• So zeigen Sie Vorher-Nachher-Fotos in WordPress an (mit Slide-Effekt)
• So fügen Sie eine Galerie in WordPress mit einem Lightbox-Effekt ein
• So fügen Sie Instagram-ähnliche Fotofilter in WordPress hinzu (Schritt für Schritt)
• KI zur Bilderzeugung in WordPress verwenden
• So fügen Sie animierte GIFs in WordPress hinzu (Der RICHTIGE Weg)

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Bild-Hover-Effekte in WordPress hinzufügen. Möglicherweise möchten Sie auch unsere Expertenauswahl der besten WordPress-Slider-Plugins und unsere Liste der Quellen für kostenlose gemeinfreie und CC0-lizenzierte Bilder 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.