Wichtige Erkenntnisse
- Elementor-Hover-Effekte für Bilder live im Style-Tab des Bild-Widgets unter einem Hover-Tab mit vier Steuerelementen: Opazität, CSS-Filter, Übergangsdauer und Hover-Animation.
- Ein Graustufen-Farb-Hover-Effekt in Elementor benötigt keinen Code: Sättigung unter CSS-Filtern auf der Registerkarte Normal auf 0 und auf der Registerkarte Hover auf 100 zurücksetzen.
- Die Hover-Animationsvoreinstellungen von Elementor, wie z. B. Grow, verschieben das gesamte Bild und die Grow-Voreinstellung skaliert ein Bild im Schwebeflug auf 110 Prozent seiner Größe.
- Das Image-Widget von Elementor kann im Hover keinen Titel oder keine Beschreibung über dem Bild anzeigen, daher benötigen Textüberlagerungen eine Containerumgehung, benutzerdefiniertes CSS oder ein Addon-Widget.
- Das Master Addons Image Hover Effects Widget verfügt über 30 benannte Hover-Effekte, die einen Titel und eine Beschreibung über dem Bild animieren und aus einem Hover Effect-Dropdown ausgewählt werden.
Sie können einem Bild Elementor-Hover-Effekte auf drei Arten hinzufügen Das Bild-Widget verfügt über Opazität und CSS-Filtereinstellungen für den Hover-Zustand Es verfügt außerdem über Hover-Animations-Voreinstellungen, die das Bild verschieben Für einen Titel und eine Beschreibung, die über dem Bild angezeigt werden, benötigen Sie ein dafür erstelltes Widget, wie z Bild-Hover-Effekte.
Diese Anleitung deckt jede Route mit den genauen Einstellungen ab, getestet auf Elementor 4.3. Beginnen Sie mit den ersten beiden, wenn das Bild nur reagieren soll, und springen Sie zur dritten, wenn Sie Text auf dem Bild haben möchten.
Inhaltsverzeichnis
Wo die Hover-Einstellungen in Elementor sind
Wählen Sie ein Bild-Widget aus, öffnen Sie das Stil Tab und schauen unter dem Bild-Abschnitt Unterhalb der Größen-Regler befinden sich zwei Tabs, Normal und Hover Alles auf dem Hover-Tab gilt nur, solange der Zeiger über dem Bild ist Elementor erklärt die Idee in seinem Einführung in Hover-Effekte.
| Steuerung | Was es auf hover macht |
|---|---|
| Opazität | Blendet das Bild ein oder aus, von 0 auf 1 |
| CSS-Filter | Veränderungen Unschärfe, Helligkeit, Kontrast, Sättigung und Farbton |
| Übergangsdauer | Legt fest, wie lange die Änderung dauert, in Sekunden |
| Hover-Animation | Spielt eine voreingestellte Bewegung wie Grow |
Weg 1: Opazitäts- und CSS-Filter
Verwenden Sie Deckkraft- und CSS-Filter, wenn sich das Bild selbst im Schwebeflug ändert. Das klassische Beispiel ist ein Foto, das in Schwarzweiß liegt und sich beim Eintreffen des Zeigers in Farbe verwandelt.
- Wählen Sie das Bild-Widget aus und öffnen Sie es Stil.
- Auf der gewöhnlich Tab, klicken Sie auf den Bleistift neben CSS-Filter Und ziehen Sättigung zu 0. Das Bild wird grau.
- Wechseln Sie zu den Schweben Tab, öffnen CSS-Filter Noch einmal und sättigung auf 100 setzen.
- Einstellen Übergangsdauer Auf etwa 0,4, sodass die Farbe nachlässt.
- Optional: Stellen Sie die Opazität auf 0,85 bei Normal und 1 bei Hover ein, um eine leichte Aufhellung zu erzielen.
Die gleichen zwei Tabs geben Ihnen eine Unschärfe, die sich aufklärt, ein schwaches Bild, das aufhellt, oder eine Farbtonverschiebung Halten Sie den Übergang zwischen 0,3 und 0,5 Sekunden Kürzer als das sieht aus wie ein Flimmern, und länger fühlt sich langsam an.
Weg 2: Hover Animation-Voreinstellungen
Hover Animation bewegt das gesamte Bild, wenn der Zeiger darüber liegt. Es handelt sich um einen Dropdown am unteren Ende der Hover-Registerkarte und es ist kein anderes Setup erforderlich.
- Wählen Sie das Bild-Widget aus und öffnen Sie es StilDann die Schweben Tab.
- Offen Hover-Animation und wählen Sie eine Voreinstellung aus. Wachsen Ist die, die die meisten Menschen wollen.
- Vorschau der Seite und verschieben Sie den Zeiger über das Bild.
Grow vergrößert das Bild über seine ursprünglichen Kanten hinaus, sodass es seine Nachbarn in einem engen Raster überlappen kann. Wenn Sie möchten, dass das Bild in einen festen Rahmen hineinzoomt, sind ein paar Zeilen CSS erforderlich.
Weg 3: Ein Widget für Text über dem Bild
Verwenden Sie ein dediziertes Widget, wenn ein Titel und eine Beschreibung über dem Bild im Mauszeiger angezeigt werden sollen. Das Bild-Widget von Elementor zeigt die Bildunterschrift unter dem Bild an und verfügt über keine Einstellung, um Text oben anzubringen.
Diese Schritte verwenden das Widget Image Hover Effects von Master Addons.
- Bearbeiten Sie die Seite mit Elementor, durchsuchen Sie das Widget-Panel nach Bild-Hover-Effekte Und auf die Seite ziehen.
- Unter Effekte & Bild„Laden Sie das Bild hoch.
- Öffnen Sie die Hover-effekt Dropdown und wählen Sie einen der 30 Effekte aus Sie sind namentlich aufgeführt, beginnend mit Lily, Sadie, Roxy und Bubba.
- Geben Sie die ein Titel und die Beschreibung In eigenen Abschnitten.
- Einstellen Links oder Popup? Wenn ein Klick irgendwo hingehen sollte.
- Stellen Sie auf der Registerkarte Stil die Overlay-Farbe, die Bildtrübung für Normal und Hover sowie die Typografie für jede Textebene ein.
Probieren Sie die Effekte aus, bevor Sie etwas installieren. Die Widget-Seite für Bild-Hover-Effekte Acht Live-Karten hat, die Sie mit der Maus bewegen können, plus die vollständige Liste von 30 Effekten.
Acht der Effekte funktionieren ohne Pro-Lizenz und 22 benötigen Master Addons Pro. Jedes Widget enthält ein Bild, sodass ein Raster aus Hover-Karten aus mehreren Widgets nebeneinander besteht.
Video-tutorial
Dieses vierminütige Video richtet das Widget Image Hover Effects von einer leeren Seite aus ein.
Welchen Weg soll man nutzen?
Wählen Sie nach dem, was sich im Schwebeflug ändern soll: dem Bild, seiner Position oder dem Text darüber.
| Du willst | Verwenden | Bedürfnisse |
|---|---|---|
| Graustufen bis Farbe, verschwommen bis scharf, schwach bis hell | CSS-Filter und Deckkraft auf der Registerkarte Hover | Elementer |
| Das Bild zum Wachsen oder Pulsen | Hover-Animation | Elementer |
| Ein Zoom, der in seinem Rahmen bleibt | Eine CSS-Klasse und ein paar Zeilen CSS | Elementor und irgendwo zum Hinzufügen von CSS |
| Ein Titel und eine Beschreibung über dem Bild | Widget für Bild-Hover-Effekte | Master-Addons |
| Ein zweites Bild, das das erste ersetzt | Erweitertes Bild-Widget oder ein Containerhintergrund | Master-Addons oder Elementor allein |
Für Text und Bilder, die auf andere Weise kombiniert werden, siehe Elementortext über Bild.
Funktionieren Hover-Effekte auf Telefonen?
Nicht so wie mit dem Mauszeiger, denn ein Touchscreen hat keinen Zeiger zum Bewegen. Die Style-Tabs-Effekte von Elementor werden nicht auf ein Telefon abgefeuert, was einer Farbänderung nicht schadet.
Beim Widget Image Hover Effects zeigt der erste Tippen in der Regel den Text an und der zweite Tipp folgt dem Link, wenn der Text wesentlich ist, wie z.B. ein Preis oder ein Name, legen Sie ihn an eine Stelle, die auch auf kleinen Bildschirmen sichtbar ist.
Häufig gestellte Fragen
Wie füge ich einem Bild in Elementor einen Hover-Effekt hinzu?
Wählen Sie das Bild-Widget, öffnen Sie die Registerkarte Stil und wechseln Sie zur Registerkarte Hover Stellen Sie Opazität oder CSS-Filter für den Hover-Zustand ein oder wählen Sie eine Hover-Animation wie Grow. Fügen Sie eine Übergangsdauer von 0,3 bis 0,5 Sekunden hinzu, damit die Änderung reibungslos verläuft.
Hat Elementor Image-Hover-Effekte ohne Plugin?
Ja. Das Image-Widget in Elementor hat Hover-Steuerelemente für Opazität, CSS-Filter und eine Hover-Animation voreingestellt Sie ändern oder verschieben das Bild Text über dem Bild benötigt ein Addon-Widget oder benutzerdefiniertes CSS.
Wie kann ich ein Bild in Elementor von Schwarzweiß auf Farbe im Schwebeflug umstellen?
Öffnen Sie im Register Stil des Bild-Widgets CSS-Filter auf der Registerkarte Normal und stellen Sie die Sättigung auf 0. Öffnen Sie dann CSS-Filter auf der Registerkarte Hover und stellen Sie die Sättigung auf 100. Übergangsdauer auf etwa 0,4 Sekunden ein.
Wie zeige ich Text, wenn ich mit der Maus über ein Bild in Elementor fahre?
Verwenden Sie ein dafür erstelltes Widget. Fügen Sie mit Master Addons das Widget Image Hover Effects hinzu, laden Sie das Bild hoch, geben Sie einen Titel und eine Beschreibung ein und wählen Sie einen Hover-Effekt aus. Der Text bleibt verborgen, bis der Zeiger über dem Bild ist.
Warum funktioniert mein Elementor-Hover-Effekt nicht?
Überprüfen Sie, ob die Einstellung auf der Registerkarte Hover und nicht auf der Registerkarte Normal liegt, und dass die Übergangsdauer über 0 liegt Auf einem Telefon oder Tablet gibt es keinen Hover, also testen Sie mit einer Maus Wenn Sie benutzerdefiniertes CSS verwenden, bestätigen Sie, dass der Klassenname auf dem Widget mit dem im Code übereinstimmt.
Letzte Gedanken
Elementor-Hover-Effekte für Bilder gibt es in drei Arten. Die Registerkarte Stil ändert das Aussehen des Bildes, Hover Animation bewegt es und eine Textüberlagerung benötigt ein Widget. Beginnen Sie mit den integrierten Steuerelementen, da der Versuch nichts kostet.
Wenn Sie einen Titel und eine Beschreibung auf dem Bild wünschen, wird die Widget für Bild-Hover-Effekte 30 Effekte zur Auswahl bereithält, und die Preisseite Zeigt, welcher Plan alle umfasst.
Verwandte Lektüre
