Wichtige Erkenntnisse
- Elementor hat keine einzige Einstellung, um ein Bild im Hover zu ändern, daher erfolgt der Austausch mit einem Containerhintergrund hinter dem Bild oder mit einem Widget, das ein zweites Bild akzeptiert.
- Die No-Plugin-Methode zum Ändern eines Bildes im Hover in Elementor besteht darin, das zweite Bild als Containerhintergrund festzulegen und die Hover-Opacity des Bild-Widgets auf 0 zu setzen.
- Das Master Addons Advanced Image-Widget vertauscht Bilder mit einem Schalter, Display Hover Image, der im Abschnitt Hover Image der Registerkarte Inhalt zu finden ist.
- Die Hover-Animation von Elementor voreingestellt Grow zoomt ein Bild im Schwebeflug auf 110 Prozent, und das Bild wächst über seine ursprünglichen Kanten hinaus.
- Ein Zoom im Hover, der in seinem Frame verbleibt, erfordert eine CSS-Klasse im Image-Widget und drei kurze CSS-Regeln, die das Bild innerhalb eines versteckten Überlaufs skalieren.
Um ein Bild beim Hover in Elementor zu ändern, setzt man ein zweites Bild hinter oder in das erste und gibt es beim Eintreffen des Zeigers preis, Elementor kann dies ohne Plugin durch einen Containerhintergrund, ein Hover-Bild-Widget mit einem Schalter, beim Zoomen im Hover wird eine Voreinstellung für einen Basiszoom benötigt, oder ein paar Zeilen CSS für einen Zoom, der in seinem Frame bleibt.
Alle vier folgenden Methoden wurden auf Elementor 4.3 erstellt und getestet.
Inhaltsverzeichnis
Welche Methode verwendet werden soll
Zwei dieser Methoden tauschen das Bild aus und zwei zoomen es Innerhalb jedes Paares verwendet eine nur Elementor und die andere ist schneller oder ordentlicher.
| Tor | Methode | Bedürfnisse | Code |
|---|---|---|---|
| Wechseln Sie zu einem zweiten Bild | Containerhintergrund plus Hover-Opazität | Elementer | Keine |
| Wechseln Sie zu einem zweiten Bild | Erweitertes Bild-Widget | Master-Addons | Keine |
| Zoomen Sie das Bild | Hover-Animation: Wachsen | Elementer | Keine |
| Zoomen Sie in einen festen Rahmen | CSS-Klasse im Image-Widget | Elementor und ein Ort zum Hinzufügen von CSS | Drei Regeln |
Ändern Sie ein Bild im Hover mit einem Containerhintergrund
Diese Methode braucht kein Plugin Das zweite Bild ist der Hintergrund eines Containers, und das erste Bild sitzt als normales Image-Widget darauf, beim Hover wird das obere Bild ausgeblendet und der Hintergrund durchschaut.
- Fügen Sie einen Behälter hinzu und stellen Sie die Polsterung auf 0 ein.
- Im Container Stil Tab, öffnen Hintergrund, wählen Sie Classic und laden Sie das Bild hoch, das im Hover angezeigt werden soll Position auf Mitte und Größe auf Abdeckung setzen.
- Ziehen Sie einen Bild Widget in den Container und wählen Sie das Bild aus, das zuerst angezeigt werden soll.
- Wählen Sie das Bild-Widget aus, öffnen Sie Stil und wechseln Sie auf die Schweben Tab.
- Einstellen Opazität zu 0 und Übergangsdauer auf etwa 0,4.
Verwenden Sie zwei Bilder mit den gleichen Proportionen Der Container nimmt seine Höhe aus dem Image-Widget, sodass ein Hintergrund mit einer anderen Form beschnitten wird.
Ändern Sie ein Bild im Hover mit einem Hover-Image-Widget
Ein Widget mit einem Hover-Bildfeld führt den gleichen Austausch von einem Panel aus durch Die folgenden Schritte verwenden die Erweitertes Bild-Widget Von Master Addons.
- Durchsuchen Sie das Widget-Panel nach Erweitertes Bild Und auf die Seite ziehen.
- In der Bild Abschnitt, wählen Sie das Hauptbild.
- Öffnen Sie die Hover-bild Abschnitt und einschalten Bild mit dem Mauszeiger anzeigen.
- Wählen Sie das zweite Bild in dem erscheinenden Feld.
- Vorschau der Seite und Mauszeiger.
Das Widget verfügt außerdem über ein Farbband, einen Link und eine Lightbox, die zu Produktfotos passt: Vorderansicht zuerst, Rückansicht im Hover, mit einem neuen Farbband in der Ecke.
Möchten Sie Text auf Hover? Bild-Hover-Effekte Animiert einen Titel und eine Beschreibung über ein Bild, wobei 30 Effekte zur Auswahl stehen.
Zoomen Sie ein Bild im Schwebeflug mit der Grow-Voreinstellung
Der schnellste Zoom ist eine Voreinstellung Wählen Sie das Bild-Widget, öffnen Sie StilWechseln Sie zum Schweben Tabulator und Set Hover-Animation zu Wachsen. Das Bild skaliert auf 110 Prozent, während der Zeiger darüber ist.
Grow funktioniert gut für ein einzelnes Bild mit Platz drumherum In einem engen Raster überlappt es die Bilder daneben, also dort die nächste Methode anwenden.
Zoomen Sie ein Bild, wenn Sie mit dem Mauszeiger in seinem Rahmen fahren
Für einen Zoom, der im eigenen Feld verbleibt, geben Sie dem Image-Widget eine CSS-Klasse und fügen Sie drei Regeln hinzu. Das Widget behält seine Größe und das Bild skaliert darin nach oben.
- Wählen Sie das Bild-Widget aus und öffnen Sie es Fortgeschritten. In CSS-KurseTyp
hover-zoom. - Fügen Sie das CSS unten zu Ihrer Website hinzu.
.hover-zoom { overflow: hidden; border-radius: 10px; }
.hover-zoom img { transition: transform 0.4s ease; display: block; }
.hover-zoom:hover img { transform: scale(1.08); }
Wohin das CSS geht, hängt von Ihrem Setup ab Elementor Pro hat im Reiter Erweitert eine Custom CSS Box, ohne diese verwenden Sie Aussehen, Anpassen, Zusätzliches CSS in WordPress, oder die Benutzerdefinierte CSS-Erweiterung In Master Addons. Ändern Sie 1.08 auf 1.15 für einen stärkeren Zoom.
Vier Dinge, die schiefgehen
Die meisten Probleme mit diesen Effekten entstehen durch Bildgrößen und durch Tests auf dem falschen Gerät.
- Die beiden Bilder haben unterschiedliche Proportionen Der Tausch springt dann oder kernt beide in gleicher Breite und Höhe exportieren.
- Das gezoomte Bild deckt Inhalte in der Nähe Grow hat keinen Rahmen Verwenden Sie die CSS-Methode, wenn Bilder dicht beieinander sitzen.
- Auf einem Telefon passiert nichts Touch-Screens haben keinen Schwebeflug Stellen Sie sicher, dass das erste Bild alleine funktioniert, denn Telefonbesucher sehen das zweite möglicherweise nie.
- Das Hover-Bild ist schwer Komprimieren Sie beide Dateien, da ein großes zweites Bild als leerer Blitz im ersten Hover angezeigt werden kann.
Häufig gestellte Fragen
Wie ändere ich ein Bild im Hover in Elementor ohne Plugin?
Legen Sie das Hover-Bild auf einen Container als Hintergrund und platzieren Sie dann ein Image-Widget mit dem ersten Bild in diesem Container. Öffnen Sie im Style-Tab des Image-Widgets die Hover-Registerkarte und stellen Sie die Opazität auf 0 mit einer Übergangsdauer von etwa 0,4 Sekunden ein.
Wie zoome ich ein Bild auf Hover in Elementor?
Wählen Sie das Bild-Widget aus, öffnen Sie den Stil, gehen Sie zur Registerkarte Hover und setzen Sie Hover Animation auf Grow Für einen Zoom, der im Bildrahmen verbleibt, fügen Sie dem Widget eine CSS-Klasse hinzu und skalieren Sie das Bild mit einer Transformation innerhalb eines Wrappers, der einen Überlauf auf versteckt gesetzt hat.
Kann das Widget Image Hover Effects das Bild beim Hover ändern?
Nr. Image Hover Effects behält ein Bild und animiert einen Titel und eine Beschreibung darüber Um es in ein zweites Bild zu vertauschen, verwenden Sie das Advanced Image Widget und schalten Sie Display Hover Image ein, oder verwenden Sie die Container-Hintergrundmethode.
Warum überschneidet sich mein Bild mit anderen Inhalten, wenn es zoomt?
Die Grow-Animation skaliert das ganze Bild über ihren Kasten hinaus Geben Sie dem Bild-Widget eine Klasse, stellen Sie den Überlauf auf darauf versteckt ein und skalieren Sie das img-Element darin Die Box bleibt dann gleich groß und klippt den Zoom ein.
Kann ich damit ein Produktbild im Hover in WooCommerce ändern?
Diese Methoden funktionieren auf Bildern, die Sie selbst in Elementor platzieren Produktraster, die von WooCommerce oder einem Produkt-Widget generiert werden, sind ein anderer Fall und hängen vom Theme oder dem Widget ab, das sie ausgibt.
Letzte Gedanken
Um ein Bild beim Hover in Elementor zu ändern, verwenden Sie einen Containerhintergrund mit einem Fading Image-Widget oder ein Widget mit einem Hover-Bildfeld. Verwenden Sie zum Zoomen Grow für ein schnelles Ergebnis und die CSS-Klasse, wenn das Bild in seinem Frame bleiben muss.
Die Erweitertes Bild-Widget Wandelt den Tausch in einem Panel ab und Bild-Hover-Effekte Textüberlagerungen abdeckt.
Verwandte Lektüre
