Wichtige Erkenntnisse
- CSS-Bild-Hover-Effekte in Elementor führen zwei Schritte aus: Fügen Sie dem Bild-Widget unter Erweitert, CSS-Klassen, einen Klassennamen hinzu und fügen Sie dann eine CSS-Regel ein, die auf diese Klasse abzielt.
- Die fünf CSS-Bild-Hover-Effekte in diesem Handbuch sind ein Zoom im Inneren des Rahmens, Graustufen für Farben, ein Aufzug mit Schatten, eine dunkle Überlagerung und eine nach oben gerichtete Beschriftung.
- Elementor Pro verfügt über ein benutzerdefiniertes CSS-Feld auf der Registerkarte Erweitert jedes Widgets, und ohne Pro kann dasselbe CSS in Aussehen, Anpassen und zusätzliches CSS gehen.
- Das Image-Widget von Elementor druckt seine Bildunterschrift als Bildunterschrift in eine Figur, was eine Gleitunterschrift allein mit CSS ermöglicht.
- Änderungen der Graustufen zu Farbe und Deckkraft erfordern kein CSS in Elementor, da die Registerkarte Stil des Bild-Widgets bereits über CSS-Filter und Deckkraft auf einer Registerkarte Hover verfügt.
CSS-Bild-Hover-Effekte funktionieren in Elementor genauso wie überall: eine Klasse für das Element und eine Regel mit :hover. Die einzigen Elementor-spezifischen Teile sind, wo Sie die Klasse eingeben und wo Sie das CSS einfügen Unten sind fünf Effekte, die Sie kopieren können, die jeweils auf Elementor 4.3 mit dem Standard-Image-Widget getestet wurden.
Wenn Sie lieber keinen Code berühren möchten, zeigt der letzte Abschnitt die No-Code-Route mit dem Widget für Bild-Hover-Effekte.
Inhaltsverzeichnis
Wie CSS-Hover-Effekte in Elementor funktionieren
Jeder Snippet unten folgt demselben Muster. Sie geben dem Bild-Widget eine Klasse und das CSS ändert das Bild in diesem Widget, wenn der Zeiger darüber ist.
- Wählen Sie das Bild-Widget in Elementor aus.
- Öffnen Sie die Fortgeschritten Tab und finden CSS-Kurse.
- Geben Sie den Klassennamen beispielsweise ohne Punkt ein
hover-zoom. - Fügen Sie Ihrer Website einmal das passende CSS hinzu. Jedes Bild mit dieser Klasse erhält dann den Effekt.
Die Klasse landet auf dem äußeren Element des Widgets und das Bild ist ein img Darin zielen die Regeln also darauf ab .hover-zoom img.
Wo kann man das CSS hinzufügen
Sie haben vier Stellen zum Einfügen von CSS, je nachdem, was installiert ist.
| Platz | Bedürfnisse | Gilt für |
|---|---|---|
| Widget, Erweitert, Benutzerdefiniertes CSS | Elementor Pro | Dieses Widget |
| Site-Einstellungen, benutzerdefiniertes CSS | Elementor Pro | Die ganze Seite |
| Aussehen, Anpassen, Zusätzliches CSS | Nur WordPress | Die ganze Seite |
| Benutzerdefinierte CSS-Erweiterung | Master-Addons | Das Element, dem Sie es hinzufügen |
Für Kurse, die Sie wiederverwenden möchten, ist ein standortweiter Ort das bessere Zuhause Die Benutzerdefinierte CSS-Erweiterung Seite erklärt, wie die Option Master Addons funktioniert.
5 CSS-Bild-Hover-Effekte zum Kopieren
Jeder Effekt hat einen Klassennamen, das CSS und einen Screenshot des Ergebnisses vor und während des Hovers.
1. Zoomen Sie in das Innere des Rahmens
Das Bild skaliert nach oben, während seine Box gleich groß bleibt Klassenbezeichnung: hover-zoom.
.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); }
2. Graustufen zum Färben
Das Bild ist in Schwarzweiß gehalten und verfärbt sich im Schwebeflug in Vollfarbe. Klassenname: hover-color.
.hover-color img { filter: grayscale(100%); transition: filter 0.4s ease; }
.hover-color:hover img { filter: none; }
3. Mit einem Schatten heben
Das Bild bewegt sich einige Pixel nach oben und erhält einen weichen Schatten, wie eine Karte, die aufgenommen wird Klassenname: hover-lift.
.hover-lift img { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover img { transform: translateY(-6px); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.18); }
4. Dunkle Überlagerung
Über dem Bild blendet eine dunkle Ebene ein, die mit einem Pseudoelement aufgebaut ist, so dass kein extra Markup benötigt wird Klassenname: hover-dim.
.hover-dim { position: relative; }
.hover-dim::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.hover-dim:hover::after { opacity: 1; }
5. Bildunterschrift, die nach oben gleitet
Die bildeigene Bildunterschrift versteckt sich unterhalb des unteren Randes und gleitet im Hover nach oben Im Bild-Widget setzen Bildunterschrift Benutzerdefinierte Bildunterschrift und geben Sie den Text zuerst ein Klassenname: hover-caption.
.hover-caption figure { position: relative; overflow: hidden; margin: 0; }
.hover-caption figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px 18px; background: rgba(0, 0, 0, 0.6); color: #fff; transform: translateY(100%); transition: transform 0.35s ease; }
.hover-caption:hover figcaption { transform: translateY(0); }
Diese hier hängt davon ab, dass die Bildunterschrift da ist Ohne Bildunterschrift druckt Elementor die Figur und die Bildunterschrift nicht, und die Regel hat nichts zu bewegen.
CSS oder die eingebauten Hover-Einstellungen?
Überprüfen Sie die eigenen Steuerelemente von Elementor, bevor Sie CSS schreiben, denn zwei dieser fünf Effekte existieren als Einstellungen Der Style-Tab des Image-Widgets verfügt über einen Hover-Tab mit Opacity, CSS-Filtern und Hover-Animation.
| Effekt | In Elementor eingebaut? | Warum CSS verwenden |
|---|---|---|
| Graustufen zum Färben | Ja, CSS-Filter, Sättigung | Eine Klasse für viele Bilder |
| Zoom | Teilweise. wachsen vergrößert sich über den Rahmen hinaus. | Um den Zoom im Rahmen zu halten |
| Mit Schatten heben | Nein | Elementor hat keine Einstellung dafür |
| Dunkle Überlagerung | Nein, auf dem Image-Widget | Benötigt, es sei denn, Sie wickeln das Bild in einen Behälter |
| Gleitunterschrift | Nein | Benötigt, es sei denn, Sie verwenden ein Hover-Widget |
Die eingebauten Einstellungen werden Schritt für Schritt abgedeckt So fügen Sie Bild-Hover-Effekte in Elementor hinzu. Die allgemeine Technik ist dokumentiert am MDN's Seite für die :hover Pseudo-Klasse.
Die No-Code Route
CSS passt zu einfachen Effekten auf das Bild selbst. Sobald Sie einen Titel und eine Beschreibung wünschen, die über das Bild animiert werden, wächst das CSS schnell und Sie müssen es bei jeder Designänderung beibehalten.
Das Widget Image Hover Effects in Master Addons ersetzt das durch einen Dropdown. Es verfügt über 30 Effekte, einen Titel und eine Beschreibung für jedes Bild sowie Style-Tab-Steuerelemente für Farben und Typ.
Sehen Sie sie live. Die Widget-Seite für Bild-Hover-Effekte Acht Karten zum Schweben und eine Tabelle mit allen 30 Effekten hat.
Häufig gestellte Fragen
Wie füge ich CSS-Hover-Effekte zu einem Bild in Elementor hinzu?
Wählen Sie das Bild-Widget, öffnen Sie die Registerkarte Erweitert und geben Sie einen Klassennamen in CSS-Klassen ein. Fügen Sie dann eine CSS-Regel für diese Klasse mit: hover, zum Beispiel .hover-zoom:hover img {transform: scale (1.08); }. Fügen Sie das CSS in das benutzerdefinierte CSS von Elementor Pro oder in Appearance, Customize, Additional CSS ein.
Wo stelle ich benutzerdefiniertes CSS in Elementor ohne Pro ein?
Gehe zu Aussehen, Anpassen, Zusätzliches CSS im WordPress Dashboard und füge es dort ein Das CSS lädt auf jeder Seite, also nimmt es jedes Widget mit der passenden Klasse auf Eine benutzerdefinierte CSS-Erweiterung aus einem Addon ist eine weitere Option.
Warum funktioniert mein CSS-Hover-Effekt nicht in Elementor?
Übliche Ursachen sind ein im Feld CSS-Klassen eingegebener Punkt, ein nicht zum CSS passender Klassenname oder ein zwischengespeichertes Stylesheet, tippen Sie die Klasse ohne Punkt ein, vergleichen Sie die Schreibweise, löschen Sie dann Ihr Cache-Plugin und die Dateien von Elementor unter Extras.
Kann ich einen Bildzoom im Schwebeflug durchführen, ohne dass er überläuft?
Ja. Überlauf auf dem Widget, das die Klasse trägt, auf versteckt setzen und das img darin skalieren Das Widget behält seine Größe und clipt das vergrößerte Bild ein, Das erste Snippet in dieser Anleitung macht das.
Funktionieren CSS-Hover-Effekte auf Mobilgeräten?
Telefone haben keinen Hover-Zustand, daher wird der Effekt nach einem Tippen entweder nie angezeigt oder angezeigt und bleibt, bis der Besucher woanders tippt Behandeln Sie Hover-Effekte als Dekoration auf kleinen Bildschirmen und halten Sie jeden wichtigen Text ohne sie sichtbar.
Letzte Gedanken
CSS-Bild-Hover-Effekte in Elementor benötigen eine Klasse auf dem Bild-Widget und eine kurze Regel. Die fünf hier behandeln Zoom, Farbe, Auftrieb, Overlay und eine Gleitunterschrift und können jeweils durch Ändern eines oder zweier Werte angepasst werden.
Wenn der gewünschte Effekt Text über dem Bild enthält, wird die Widget für Bild-Hover-Effekte Bringt Sie dorthin, ohne CSS zu pflegen.
Verwandte Lektüre
