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 feuert, wenn jemand die Maus über ein Bild bewegt, statt flach zu bleiben, reagiert das Bild Es kann zoomen, verschwimmen, Farbe ändern oder ein Textfeld in Sicht schieben Sie werden auch sehen, wie sie aufgerufen werden 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.
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.
Vollständige Inhalts- und Stilkontrolle
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.
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.
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.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
Post-/Seitenduplikator
