Elementor-Bild-Hover-Effekte: 30 Hover-Animationen für Bilder
Da sitzt einfach ein statisches Bild dazu Bild-Hover-Effekte hinzufügen und das gleiche Bild fängt an, etwas zu arbeiten: Ein Titel rutscht rein, eine Beschreibung blendet aus, und ein Klick schickt Leute zu einem Link oder öffnet ein volles Popup Das Image Hover Effects Widget für Elementor wird mit 30 Hover-Animationen ausgeliefert (8 im kostenlosen Plugin und 22 weitere mit Pro) und man richtet sie ein, ohne eine CSS-Reihe zu schreiben Es passt zu den Stellen, an denen ein Bild einen Titel, eine Bildunterschrift und eine Aktion tragen muss: 30 Hover-Animationen, Team-Grids, Servicekarten, Produkt-Showcases.
Wählen Sie einen Effekt aus, wählen Sie aus, was der Klick bewirkt, und gestalten Sie jede Ebene so, dass sie Ihrem Design entspricht. Am Ende bleibt eine Bildkarte übrig, auf der die Leute tatsächlich anhalten, anstatt vorbeizuscrollen. Das Video unten geht durch die ganze Sache, zeigt jede Animation und die Einrichtung dauert ein paar Minuten.
Was sind Image Hover-Effekte?
Ein Bild-Hover-Effekt ist eine Animation, die ausgelöst wird, wenn jemand die Maus über ein Bild bewegt. Anstatt flach zu bleiben, reagiert das Bild. Es kann zoomen, verwischen, Farbe ändern oder ein Textfeld in die Ansicht schieben. Die häufigste Art ist eine Bildüberlagerung, bei der Titel und Beschreibung als Text über dem Bild erscheinen. Sie werden sie auch genannt sehen Bildüberschlagseffekte oder Foto-Hover-Effekte, und die machen alle das gleiche: Nimm ein einfaches Bild und lass es als “hier gibt es mehr, klick mich an” lesen
All das kann man mit benutzerdefiniertem CSS von Hand bauen Das heißt, die Übergänge zu schreiben, sie dazu zu bringen, sich mobil zu verhalten, und bei jeder Designverschiebung wieder in den Code zu gehen Das Master Addons Widget behandelt es visuell innerhalb von Elementor, so dass Sie bekommen Einfache Bild-Hover-Effekte Ohne einen Code-Editor zu öffnen Wenn Sie den Rest des Toolkits sehen möchten, durchsuchen Sie die Master Addons Widgets und Erweiterungen oder die Elementor-Animationsfunktionen.
30 Hover-Animationen, davon 8 kostenlos
Erste Eindrücke passieren im Hover Man bekommt eine Bibliothek von CSS-Animationen, die Titel und Beschreibung flüssig einbringen, so kommt der Text an, statt nur auf den Bildschirm zu poppen, jeden Effekt mit einem Klick anwenden, dann im Editor durchradeln, bis einer zum Bild passt, meist versuche ich es mit drei oder vier, bevor ich mich eingelebt habe, da sich ein Effekt, der auf einer weiten Landschaftsaufnahme toll aussieht, auf einer engen Portrait-Crop abfühlen kann.
- Ausblenden und Zoomen: Das Bild wird ausgeblendet oder skaliert, während der Text eingeblendet wird.
- Folie (oben, unten, links, rechts): Ein Beschriftungspanel gleitet von jeder Kante hinein.
- Drücken und enthüllen: Das Bild verschiebt sich, um Platz für den Titel und die Beschreibung zu schaffen.
- Schweben und glänzen: ein kleiner Lift und ein Lichtfeger über das Bild.
- Acht Effekte sind kostenlos: Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey und Oscar. Pro fügt 22 weitere hinzu, von Marley bis Duke.
- Läuft auf CSS: Die Bewegung bleibt glatt, da sie nicht auf schweren Skripten basiert.
- Schnell zum Testen: Effekte im Editor austauschen und die Änderung gleich sehen.
Beispiele für Bild-Hover-Effekte
Bewegen Sie den Zeiger über jede Karte oder tippen Sie auf ein Telefon, um den Effekt zu sehen. Diese acht sind die Effekte, die ohne Profi funktionieren, und jede Karte ist ein Live-Bild-Scheibungs-Effekt-Widget.
Ella & Sam
Somerset · Juni
Seerose
Griechenland
11 Tage
Sadie
Erdgeschoss
Cardio und Maschinen
römisch
Geist
12.400 Meilen
Bubble
Klippenhaus
4 Bett · EPC B
Romeo
Galeriewand
Bristol · 2025
Layla
Starter Neun Gerichte
Honig
Oberbekleidung
87 Stück
Oscar
Alle 30 Bild-Hover-Effekte
Die Dropdown-Liste Hover Effect listet 30 Effekte nach Namen auf. Jeder animiert den Titel und die Beschreibung über das Bild und unterscheidet sich in der Art und Weise, wie sich das Überlager, der Text und das Bild bewegen.
| Effekt | braucht Profi | Effekt | braucht Profi |
|---|---|---|---|
| Seerose | Nein | Julia | Ja |
| Sadie | Nein | Goliath | Ja |
| römisch | Nein | Hera | Ja |
| Bubble | Nein | Winston | Ja |
| Romeo | Nein | Selena | Ja |
| Layla | Nein | Tersie | Ja |
| Honig | Nein | Thoebe | Ja |
| Oscar | Nein | Apollo | Ja |
| Marley | Ja | Kira | Ja |
| rubinrot | Ja | Steve | Ja |
| Milo | Ja | Mose | Ja |
| Fingerhut | Ja | Jazz | Ja |
| Sarah | Ja | Ming | Ja |
| Zoe | Ja | Lexik | Ja |
| Chico | Ja | Herzog | Ja |
Intelligente Verknüpfung und Popup-Inhalte auf Klicken
Sie entscheiden, was passiert, wenn jemand auf die Karte klickt Richten Sie sie auf eine beliebige URL mit einem Standardlink, oder schalten Sie mit Pro die Aktion auf Popup und halten Sie die Leute auf der Seite Das Popup ist auch nicht auf Text beschränkt: setzen Sie Content Type auf Gespeicherter Abschnitt Und es zieht jede Elementor-Vorlage ein, die Sie bereits erstellt haben. Dadurch wird eine Bildkarte zu einem Eingang zu einer vollständigen Biografie, einem Produktspezifikationsblatt oder einem Kontaktformular, und der Besucher verlässt die Seite nie.
- Zwei-Klick-Aktionen: Senden Sie den Datenverkehr mit einem Link oder halten Sie die Leute mit einem Popup (Pro) vor Ort.
- Echte Vorlagen im Popup (Pro): Ein Bild, einen Text oder ein vollständiges Layout aus Ihrer Bibliothek anzeigen.
- Necken, dann sagen: Das Bild ist der Hook und das Popup trägt das Detail.
Text über Bild: Titel, Beschreibung und Overlay-Styling
Sie steuern, wie die Karte bis ins Detail aussieht Laden Sie Ihr Bild hoch und stellen Sie ihre Deckkraft ein und filtern Sie separat nach dem Normal - und Hover-Zustand Fügen Sie eine Überschrift (wählen Sie das richtige HTML-Tag, damit es Ihrer Seitenstruktur hilft) und eine Beschreibung hinzu, dann stylen Sie jedes Stück für sich mit seinen eigenen Farben, Typ, Schatten und Abständen.
- Separater Titel und Beschreibung: Stil jedes einzelnen, damit die Hierarchie klar liest.
- Bildfilter: Der Graustufen-zu-Farben-Trick beim Hover sieht immer noch gut aus und ist hier eine einmalige Änderung.
- Kartenrahmen: Hintergrund, Ränder und Kastenschatten sowie abgerundete Ecken und Polsterung mit Pro, sodass es genau in Ihrem Layout liegt.
Elementor Hover-Optionen vs. Bild-Hover-Effekte-Widget
Das eigene Bild-Widget von Elementor hat auf der Registerkarte Stil die Hover-Einstellungen: Deckkraft, CSS-Filter und eine Hover-Animation wie Grow oder Pulse. Sie ändern das Bild selbst. Sie können keinen Text über das Bild setzen, was die Lücke ist, die dieses Widget füllt.
| Elementor-Bild-Widget | Widget für Bild-Hover-Effekte | |
|---|---|---|
| Trübung auf Schwebe | Ja | Ja |
| CSS-Filter auf Hover | Ja | Ja |
| Schweben Animation | Voreinstellungen, die das gesamte Bild bewegen | 30 Effekte, die das Overlay, den Titel und die Beschreibung animieren |
| Text über das Bild | kein drohen Die Bildunterschrift sitzt unter dem Bild. | Titel und Beschreibung auf dem Bild |
| Text, der auf dem Schwebeflug erscheint | Nein | Ja |
| Klicken Sie auf Aktion | Link oder Lightbox | Link oder ein Popup mit Pro |
| Wechseln Sie zu einem zweiten Bild auf Hover | Nein | kein . Verwenden Erweitertes Bild dafür. |
Bild-Hover-Effekte auf einen Blick
Die wichtigsten Fakten über das Widget in einer Tabelle.
| Merkmal | Bild-Hover-Effekte |
|---|---|
| Schwebeeffekte | 30. 22 von ihnen brauchen Profi. |
| Text auf dem Bild | Titel und Beschreibung mit einem HTML-Tag von H1 bis H6 für den Titel |
| Klicken Sie auf Aktion | Keine, ein Link oder ein Popup (Pro) |
| Popup-Inhalte (Pro) | Text, ein Bild oder ein gespeicherter Abschnitt, Widget oder Seitenvorlage |
| Bildeinstellungen | Opazität und Filter separat für Normal und Schweben |
| Zweites Bild auf Schwebe | Nein |
| Touchscreens | Der erste Tipp zeigt den Text an. Der zweite Tipp folgt dem Link. |
| Bedürfnisse | Elementor- und Master-Addons |
Wie füge ich Image Hover-Effekte in Elementor hinzu?
Eine funktionierende Hover-Karte haben Sie in weniger als zwei Minuten Kein CSS, keine Shortcodes.
- Master Addons installieren und aktivieren, dann jede Seite mit Elementor bearbeiten.
- Durchsuchen Sie das Widget-Panel nach Bild-Hover-Effekte Und ziehen Sie es auf Ihr Layout.
- Laden Sie Ihr Bild hoch und fügen Sie einen Titel und eine Beschreibung hinzu.
- Öffnen Sie den Hover Effect Dropdown und wählen Sie eine Animation aus Acht sind kostenlos und 22 weitere werden mit Pro geliefert.
- Legen Sie die Klickaktion auf einen Link oder auf ein Popup mit gespeicherter Vorlage fest, wenn Sie Pro haben.
- Stilieren Sie den Titel, die Beschreibung und den Container und veröffentlichen Sie sie dann.
Eines lohnt sich, bevor Sie veröffentlichen: Vorschau der Karte auf einem Telefon Hover existiert nicht auf Touch, also überprüfen Sie, ob das Tippverhalten sinnvoll ist (mehr dazu in den FAQ) Für jede in Ordnung angelegte Einstellung folgen Sie der Bild Hover Effekte Dokumentation.
Wo kann man Hover-Effekte auf Bilder verwenden?
- Teamraster: Name und Rolle auf hover, dann eine vollständige Bio in einem Popup auf Klick Hier ist Wie man einen Abschnitt für Teammitglieder aufbaut.
- Portfolios und Galerien: Über jedes Foto ein Projekttitel und ein Link “Fallstudie anzeigen”.
- Servicekarten: Eine kurze Beschreibung und ein Link bis zur Service-Seite.
- Produktvitrinen: Tease das Produktbild, dann öffne die Specs in einem Popup.
- Blog und Kategorie Kacheln: Eine Hover-Beschriftung zur bildgesteuerten Navigation.
Weitere Möglichkeiten, Text und Bilder zusammenzufügen, finden Sie unter 25 Elementor-Text-über-Bild-Techniken. Zu den zugehörigen Bild-Widgets gehören die Bild Karussell, die Filterbare Bildergalerie, die Bild Hotspot Widget und die Erweitertes Bild Widget.
Häufig gestellte Fragen zu Image Hover Effekten
Werden diese Hover-Effekte auf mobilen Geräten funktionieren?
Sie sind für Desktop gebaut, wo eine Maus zum Schweben ist Auf einem Touchscreen feuert der Effekt normalerweise beim ersten Tippen, um den Inhalt anzuzeigen, und der zweite Tipp folgt dem Link oder öffnet das Popup. Planen Sie also zwei Tippen auf Mobilgeräten ein und stellen Sie sicher, dass der Text lesbar bleibt, sobald er angezeigt wird.
Wie erstelle ich einfache Bilder-Hover-Effekte, ohne CSS zu schreiben?
Lasst das Widget Image Hover Effects auf eurer Seite fallen, ladet ein Bild hoch, fügt einen Titel und eine Beschreibung hinzu und wählt eine Animation aus dem Dropdown ausDas ist es, kein CSS. Das Widget schreibt das CSS für euch hinter die Kulissen, so dass selbst eine ziemlich involvierte Hover-Karte einfach zusammengestellt werden kann.
Kann ich eine Team-Bio oder Produktdetails in einem Popup auf Klick öffnen?
Ja, mit Pro. Setzen Sie den Namen in den Titel und die Rolle in die Beschreibung, stellen Sie die Klickaktion auf Popup, und wählen Sie Inhaltstyp: Gespeicherter Abschnitt Bauen Sie die Bio als Vorlage in Elementor auf und wählen Sie sie hier aus Klicken Sie auf das Foto und das vollständige Layout öffnet sich im Popup.
Sind alle 30 Bild-Hover-Effekte kostenlos?
No. Acht Effekte sind kostenlos: Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey und Oscar Die anderen 22 kommen mit Master Addons Pro, zusammen mit Popup-Inhalten, abgerundeten Ecken und Polsterungssteuerungen Titel, Beschreibung, Link und Bildfilter funktionieren alle in der kostenlosen Version.
Wie zeige ich Text, wenn jemand in Elementor über ein Bild schwebt?
Fügen Sie das Widget "Bildhovereffekte" hinzu, laden Sie das Bild hoch, geben Sie einen Titel und eine Beschreibung ein und wählen Sie einen Hover-Effekt. Der Text bleibt ausgeblendet, bis der Zeiger über dem Bild ist, dann animiert. Das eigene Bild-Widget von Elementor hat keine Einstellung für Text über dem Bild.
Werden viele animierte Bildkarten meine Seite verlangsamen?
Die Effekte laufen auf CSS, also eine Handvoll auf einer Seite ist kein Problem, was die Sache eigentlich verlangsamt ist das Bildgewicht, also erst mal Bilder komprimieren, wenn man auf einer Seite über 20 oder so Karten hinaus ist, schaltet man das Lazy Loading ein und der erste Lack bleibt schnell.
Kann ich verschiedene Hover-Effekte auf verschiedenen Bildern verwenden?
Die Einstellungen decken jeweils eine Karte ab, um Effekte zu mischen, fügen Sie für jedes Bild ein separates Image Hover Effects Widget hinzu und richten Sie diese unabhängig ein So erhalten Sie eine Galerie, in der die Karten nicht alle gleich animieren.
Was ist der Nutzen eines "Saved Section" im Popup gegenüber Klartext?
Gespeicherter Abschnitt ist eine Pro-Option und bietet Ihnen den vollständigen Elementor-Editor im Popup. Anstelle von reinem Text können Sie Bilder, Schaltflächen, Spalten, Videos oder Formulare hinzufügen, sodass das Popup wie der Rest Ihrer Website und nicht wie ein blankes Textfeld aussieht.
Wie zoome ich ein Bild auf Hover in Elementor?
Wählen Sie für einen einfachen Zoom das Bild-Widget von Elementor, öffnen Sie die Registerkarte Stil und legen Sie die Hover-Animation so fest, dass sie wächst. Im Bild-Hover-Effekt-Widget skalieren mehrere Effekte das Bild, während der Titel und die Beschreibung eingehen.
Kann ich das Bild auf Schwebe ändern?
Nicht mit diesem Widget. Es behält ein Bild und animiert das Overlay und den Text darüber. Um auf ein zweites Bild auf Hover zu wechseln, verwenden Sie die Erweitertes Bild Widget und aktivieren Sie das Hover-Bild.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
![Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post-/Seitenduplikator
