Wichtige Erkenntnisse
- Das Master Addons Image Hover Effects Widget für Elementor verfügt über 30 Bild-Hover-Effekte, die jeweils nach Namen aus einem Hover Effect-Dropdown in der Inhaltsregisterkarte ausgewählt werden.
- Acht Image-Hover-Effekte funktionieren ohne Master Addons Pro: Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey und Oscar Die anderen 22 Effekte brauchen Pro.
- Die meisten der 30 Bild-Hover-Effekte zeigen einen Titel und eine Beschreibung, sechs zeigen auch soziale Symbole, Honey verwendet einen Untertitel und Julia zeigt drei separate Textzeilen.
- Jeder Bild-Hover-Effekt im Widget ist mit CSS erstellt und jedes Widget enthält ein Bild, sodass ein Raster aus Hover-Karten aus mehreren Widgets erstellt wird.
- Auf Touchscreens erscheinen Bild-Hover-Effekte normalerweise beim ersten Tippen, und ein zweiter Tipp folgt dem Link.
Image Hover Effekte sind Animationen, die abgespielt werden, wenn sich der Zeiger über ein Bild bewegt, am häufigsten um einen Titel und eine Beschreibung zu enthüllen Unten sind 30 davon, alle aus dem Widget für Bild-Hover-Effekte Für Elementor, jeder in seinem Hover-Zustand auf einer echten Seite erfasst Verwenden Sie die Liste, um einen Effekt auszuwählen, der danach angezeigt wird, wo er passt.
Die Effekte werden im Widget namentlich genannt, daher sind die folgenden Namen das, was Sie im Dropdown sehen werden. Die ersten acht arbeiten an jedem Plan und der Rest benötigt Master Addons Pro.
Inhaltsverzeichnis
Wie man diese Beispiele liest
Jedes Beispiel zeigt die Karte, während der Zeiger darüber ist, Vor dem Hover ist das Bild schlicht, oder zeigt nur den Titel, je nach Effekt Die Zeile unter jedem Bild sagt, was auf dem Bildschirm ist und schlägt eine Verwendung vor.
Der Text, die Farben und die Schriftarten können Sie ändern. Was ein Effekt behebt, ist das Layout des Overlays und wie es ankommt.
Die 8 Effekte, die ohne Pro funktionieren
Die ersten acht Effekte im Dropdown gibt es auf jedem Plan Alle acht haben einen Titel und eine Beschreibung, außer Honey, der den Titel mit einem Subtitel zeigt.
1. Lilie
Titel und Beschreibung sitzen in der linken unteren Ecke über einem leicht gedimmten Bild, es passt zu Portfolio-Miniaturansichten, bei denen das Foto im Fokus bleiben soll.
2. Sadie
Der Titel ist zentriert und die Beschreibung erscheint weiter unten, da eine Tönung das Bild bedeckt. Es passt zu Zielplättchen und Kategoriekarten mit einem kurzen Slogan.
3. Roxy
Im Inneren des Bildes ist ein dünner Rahmen gezeichnet, in dem Titel und Beschreibung zentriert sind. Es passt zu Produkt- oder Servicekacheln, die einen aufgeräumten, kastenförmigen Look benötigen.
4. Bubba
Um die Mitte herum ist ein Rahmen gezeichnet, in dem sich Titel und Beschreibung befinden. Es passt zu Auflistungen, bei denen jede Karte einen Namen und eine Detaillinie trägt.
5. Romeo
Zwei dünne Linien kreuzen das Bild, mit dem Titel über der Mitte und der Beschreibung unten. Es passt zu Immobilien- und Projektkarten mit einem starken Foto.
6. Layla
Horizontale und vertikale Linien bilden einen offenen Rahmen um Titel und Beschreibung, er passt zu Innen, Architektur - und Galeriegittern.
7. Honig
Der Titel und der Untertitel teilen sich eine Zeile unten, über einer farbigen Leiste. Es passt zu Menükategorien und kurzen Etiketten. Honig ist der einzige Effekt, der das Untertitelfeld verwendet.
8. Oscar
Das Bild verdunkelt sich und es erscheint ein Rahmen mit zentriertem Titel und Beschreibung, er passt zu Shop-Kategorien und jeder Karte mit zwei kurzen Textzeilen.
Bewegen Sie sie selbst. Die Widget-Seite für Bild-Hover-Effekte Hat diese acht Effekte als Live-Karten.
Die 22 Pro-Effekte
Die restlichen 22 Effekte benötigen Master Addons Pro. Sechs davon fügen soziale Symbole hinzu und einer, Julia, zeigt drei Textzeilen.
9. Marley
Der Titel sitzt oben rechts, eine Linie verläuft darunter und unten rechts erscheint die Beschreibung, sie passt zu redaktionellen Layouts und Karten im Magazinstil.
10. Ruby
Der Titel bleibt über einem umrandeten Kasten, der die Beschreibung enthält. Es passt zu Feature-Kacheln, bei denen die Beschreibung ein Aufruf zum Handeln ist.
11. Milo
Die Beschreibung sitzt rechts oben neben einer vertikalen Linie, der Titel rechts unten Es passt zu Bildkarten mit Bildunterschrift und Guthaben.
12. Dexter
Der Titel ist oben und ein dicker Rahmen unten hält die Beschreibung Es passt zu fett gedruckten Werbeplättchen.
13. Sarah
Der Titel steht oben links mit einer Zeile darunter, und die Beschreibung folgt unten Es passt zu Blog-Style-Karten und Case Study Teasern.
14. Zoe
Von unten erhebt sich ein farbiger Balken mit dem Titel und den sozialen Symbolen, darüber sitzt die Beschreibung. Es passt zu Teammitgliedern und Autorenkarten.
15. Chico
Das Bild verdunkelt sich innerhalb eines Rahmens, wobei Titel und Beschreibung im Mittelpunkt stehen. Es passt zu dunklen, filmischen Galerien.
16. Julia
Der Titel steht links oben und darunter erscheinen bis zu drei kurze Zeilen, jede auf einem eigenen Etikett, er passt zu Karten, die ein paar schussartige Fakten brauchen Julia hat für diese Zeilen einen eigenen Repeater.
17. Goliath
Eine dunkle Tafel bedeckt den unteren Teil des Bildes und hält Titel und Beschreibung Es passt zu Karten mit längeren Beschreibungen, die einen soliden Hintergrund benötigen.
18. Hera
In der Mitte erscheint ein Diamantumriss mit dem Titel und vier sozialen Symbolen. Es passt zu Profilbildern und Social-Link-Karten.
19. Winston
Der Titel steht oben und eine Reihe sozialer Symbole erscheint unten. Es passt zu Teamrastern, in denen jede Person soziale Profile hat.
20. Selena
Das Bild schrumpft innerhalb eines Rahmens, während Titel und Beschreibung oben sitzen, es passt zu Lookbooks und Produktfotografie.
21. Terry
Das Bild wandert in ein kleineres Fenster auf dunklem Hintergrund, mit dem Titel unten links und sozialen Icons Es passt zu Lautsprecher - und Stabkarten.
22. Phoebe
Der Titel ist mit einer Reihe sozialer Symbole direkt darunter zentriert. Es passt zu einfachen Profilkarten.
23. Apollo
Der Titel sitzt oben rechts und die Beschreibung unten rechts neben einer kurzen vertikalen Linie Es passt zu minimalen Portfolio-Kacheln.
24. Kira
Der Titel steht ganz oben mit sozialen Icons in einer Lichttafel darunter, gefolgt von der Beschreibung, er passt zu Teammitgliedern mit einer einzeiligen Rolle.
25. Steve
Der Titel und die Beschreibung erscheinen jeweils auf einem eigenen weißen Balken quer über dem Bild, es passt zu kontrastreichen Etiketten auf vielbefahrenen Fotos.
26. Moses
Der Titel sitzt in einem Kasten oben links und die Beschreibung in einem zweiten Kasten unten rechts, er passt zu zweiteiligen Etiketten wie einem Namen und einem Preis.
27. Jazz
Der Titel und die Beschreibung sind zentriert und diagonale Linien schneiden über die Ecken. Es passt zu Event- und Musikkunstwerken.
28. Ming
Ein Rahmen umgibt die Mitte mit dem Titel über der Beschreibung. Es passt zu formellen Karten wie Auszeichnungen oder Zertifikaten.
29. Lexi
Der Titel steht links oben, die Beschreibung sitzt rechts unten in einer geschwungenen Linie, es passt zu verspielten Produkt - und Lifestyle-Plättchen.
30. Herzog
Der Titel steht oben und die Beschreibung sitzt in einem Kästchen unten links, es passt zu Karten mit einem kurzen Etikett, das wie ein Tag lauten soll.
Alle 30 Bild-Hover-Effekte in einer Tabelle
Diese Tabelle listet jeden Effekt mit den Textebenen auf, die er anzeigt, und ob er Pro benötigt.
| Effekt | Shows auf Hover | braucht Profi |
|---|---|---|
| Seerose | Titel und Beschreibung | Nein |
| Sadie | Titel und Beschreibung | Nein |
| römisch | Titel und Beschreibung | Nein |
| Bubble | Titel und Beschreibung | Nein |
| Romeo | Titel und Beschreibung | Nein |
| Layla | Titel und Beschreibung | Nein |
| Honig | Titel und Untertitel | Nein |
| Oscar | Titel und Beschreibung | Nein |
| Marley | Titel und Beschreibung | Ja |
| rubinrot | Titel und Beschreibung | Ja |
| Milo | Titel und Beschreibung | Ja |
| Fingerhut | Titel und Beschreibung | Ja |
| Sarah | Titel und Beschreibung | Ja |
| Zoe | Titel, Beschreibung und soziale Symbole | Ja |
| Chico | Titel und Beschreibung | Ja |
| Julia | Titel und drei Zeilen | Ja |
| Goliath | Titel und Beschreibung | Ja |
| Hera | Titel und soziale Ikonen | Ja |
| Winston | Titel und soziale Ikonen | Ja |
| Selena | Titel und Beschreibung | Ja |
| Tersie | Titel und soziale Ikonen | Ja |
| Thoebe | Titel und soziale Ikonen | Ja |
| Apollo | Titel und Beschreibung | Ja |
| Kira | Titel, Beschreibung und soziale Symbole | Ja |
| Steve | Titel und Beschreibung | Ja |
| Mose | Titel und Beschreibung | Ja |
| Jazz | Titel und Beschreibung | Ja |
| Ming | Titel und Beschreibung | Ja |
| Lexik | Titel und Beschreibung | Ja |
| Herzog | Titel und Beschreibung | Ja |
So fügen Sie einen dieser Effekte in Elementor hinzu
Das Hinzufügen eines Effekts erfordert ein Widget und einen Dropdown.
- Bearbeiten Sie Ihre Seite mit Elementor und ziehen Sie die Bild-Hover-Effekte Widget darauf.
- Laden Sie das Bild unter hoch Effekte & Bild.
- Wählen Sie den Effekt namentlich aus Hover-effekt.
- Füllen Sie die Titel und Beschreibung. Effekte mit Symbolen zeigen auch einen Abschnitt über soziale Links.
- Einstellen Links oder Popup? Wenn ein Klick irgendwo hinführen soll.
Für ein Raster legen Sie ein Widget pro Spalte und verwenden Sie denselben Effekt über die Zeile hinweg Unsere Schritt-für-Schritt-Anleitung zum Hinzufügen von Bild-Hover-Effekten in Elementor Deckt auch die eingebauten Optionen ab Für Bildunterschriften, die auf dem Bild bleiben, siehe Elementortext über Bild.
Häufig gestellte Fragen
Was sind Image Hover Effekte?
Bild-Hover-Effekte sind Animationen, die ausgeführt werden, wenn ein Besucher den Zeiger über ein Bild bewegt, das Bild kann zoomen, abdunkeln oder die Farbe ändern, und ein Titel oder eine Beschreibung rutscht oder blendet oft darüber hinaus Sie werden auch Bildüberschlag-Effekte oder Bildüberlagerungen genannt.
Welche Image Hover Effekte funktionieren ohne Master Addons Pro?
Acht der 30: Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey und Oscar Es sind die ersten acht Einträge im Dropdown Hover Effect Die restlichen 22, von Marley bis Duke, brauchen Master Addons Pro.
Kann ich auf jedem Bild einen anderen Hover-Effekt verwenden?
Ja. Jedes Widget von Image Hover Effects enthält ein Bild und einen Effekt, sodass jede Karte in einem Raster ihren eigenen haben kann Behalten Sie für eine aufgeräumte Seite einen Effekt pro Zeile oder pro Abschnitt bei.
Benötigen diese Bild-Hover-Effekte benutzerdefiniertes CSS?
Nein. Sie wählen den Effekt aus einem Dropdown aus und das Widget liefert das CSS. Farben, Deckkraft und Typografie werden im Tab Stil eingestellt, wenn Sie das CSS lieber selbst schreiben möchten, können ein paar Zeilen auf dem Image-Widget von Elementor einfache Effekte wie Zoom oder Graustufen erzeugen.
Welcher Hover-Effekt eignet sich am besten für eine Teamsektion?
Effekte mit sozialen Icons passen zu Teamkarten: Zoe, Hera, Winston, Terry, Phoebe und Kira Zoe und Kira zeigen auch eine Beschreibung, die als Rolle der Person fungiert Alle sechs brauchen Master Addons Pro.
Letzte Gedanken
Diese 30 Bild-Hover-Effekte decken die meisten Layouts ab, die Sie benötigen: Eckunterschriften, zentrierte Rahmen, Balken, Tafeln und Symbolreihen Wählen Sie nach dem Text, den Sie haben Ein Kurztitel passt zu Lily oder Oscar, eine längere Beschreibung passt zu Goliath und soziale Links rufen nach Zoe oder Winston.
Die Widget-Seite für Bild-Hover-Effekte Live-Karten zum Ausprobieren hat, und die Preisseite Listet die Pläne auf, die alle 30 umfassen.
Verwandte Lektüre
