Nøgle takeaways
- Master Addons Image Hover Effects-widgetten til Elementor har 30 billedhover-effekter, hver valgt ved navn fra en Hover Effect-dropdown på fanen Indhold.
- Otte billede hover effekter arbejde uden Master Addons Pro: Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey og Oscar. De andre 22 effekter har brug for Pro.
- De fleste af de 30 billedsvæveeffekter viser en titel og en beskrivelse, seks viser også sociale ikoner, Honey bruger en undertitel og Julia viser tre separate tekstlinjer.
- Hver billedsvæveeffekt i widgetten er bygget med CSS, og hver widget indeholder et billede, så et gitter af svævekort er lavet af flere widgets.
- På berøringsskærme vises billedsvæveeffekter normalt på det første tryk, og et andet tryk følger linket.
Billed svæve effekter er animationer, der spiller, når markøren bevæger sig over et billede, oftest for at afsløre en titel og beskrivelse. Nedenfor er 30 af dem, alle fra widget til billedhover-effekter for Elementor, hver fanget i sin hover tilstand på en rigtig side. Brug listen til at vælge en effekt ved, hvad det viser, og hvor det passer.
Effekterne går ved navn i widgetten, så navnene nedenfor er, hvad du vil se i dropdown. De første otte arbejde på hver plan, og resten har brug for Master Addons Pro.
Indholdsfortegnelse
Sådan læser du disse eksempler
Hvert eksempel viser kortet, mens markøren er over det. Før du holder markøren, er billedet almindeligt, eller viser kun titlen, afhængigt af effekten. Linjen under hvert billede siger, hvad der er på skærmen, og foreslår en brug.
Teksten, farverne og skrifttyperne er alle dine at ændre. Hvad en effekt løser er layoutet af overlayet, og hvordan det ankommer.
De 8 effekter, der virker uden Pro
De første otte effekter i dropdown er tilgængelige på hver plan. Alle otte har en titel og en beskrivelse, undtagen Honey, som viser titlen med en undertitel.
1. Lilje
Titlen og beskrivelsen sidder i nederste venstre hjørne over et let dæmpet billede. Det passer til porteføljeminiaturebilleder, hvor billedet skal holde fokus.
2. Sadie
Titlen er centreret, og beskrivelsen vises lavere nede, da en farvetone dækker billedet. Det passer til destinationsbrikker og kategorikort med en kort tagline.
3. Roxy
En tynd ramme tegnes inde i billedet med titlen og beskrivelsen centreret i det. Det passer til produkt- eller servicefliser, der har brug for et ryddeligt, indrammet look.
4. Bubba
En ramme tegnes rundt om midten, og titlen og beskrivelsen sidder inde i den. Det passer til lister, hvor hvert kort bærer et navn og en detalje.
5. Romeo
To tynde linjer krydser billedet, med titlen over midten og beskrivelsen nedenfor. Det passer til ejendoms- og projektkort med et stærkt foto.
6. Layla
Vandrette og lodrette linjer danner en åben ramme omkring titlen og beskrivelsen. Det passer til interiør, arkitektur og gallerigitre.
7. Honning
Titlen og Undertitlen deler én linje nederst, over en farvet bjælke. Det passer til menukategorier og korte etiketter. Honning er den eneste effekt, der bruger feltet Undertitel.
8. Oscar
Billedet bliver mørkere, og der vises en ramme med titlen og beskrivelsen centreret. Det passer til butikskategorier og ethvert kort med to korte tekstlinjer.
Hold dem selv over. de Widget-side for billedhover-effekter har disse otte effekter som live kort.
De 22 Pro-effekter
De resterende 22 effekter har brug for Master Addons Pro. Seks af dem tilføjer sociale ikoner, og en, Julia, viser tre tekstlinjer.
9. Marley
Titlen sidder øverst til højre, en linje løber under den og beskrivelsen vises nederst til højre. Det passer til redaktionelle layouts og magasin stil kort.
10. Rubin
Titlen forbliver over en afgrænset boks, der indeholder beskrivelsen. Det passer til funktionsfliser, hvor beskrivelsen er en opfordring til handling.
11. Milo
Beskrivelsen sidder øverst til højre ved siden af en lodret linje, og titlen er nederst til højre. Det passer til billedkort med en billedtekst og en kredit.
12. Dexter
Titlen er øverst og en tyk ramme nederst holder beskrivelsen. Det passer til dristige salgsfremmende fliser.
13. Sarah
Titlen er øverst til venstre med en streg under, og beskrivelsen følger nedenfor. Det passer til blog stilkort og case study teasers.
14. Zoe
En farvet bjælke rejser sig fra bunden med titlen og sociale ikoner, og beskrivelsen sidder over den. Den passer til teammedlemmer og forfatterkort.
15. Chico
Billedet bliver mørkere inde i en ramme, med titlen og beskrivelsen centreret. Det passer til mørke, filmiske gallerier.
16. Julia
Titlen er øverst til venstre og der vises op til tre korte linjer under den, hver på sin egen etiket. Det passer til kort, der har brug for et par punkttegnslignende fakta. Julia har sin egen repeater til disse linjer.
17. Goliat
Et mørkt panel dækker den nederste del af billedet og holder titlen og beskrivelsen. Det passer til kort med længere beskrivelser, der har brug for en solid baggrund.
18. Hera
En diamantkontur vises i midten med titlen og fire sociale ikoner. Det passer til profilbilleder og sociale linkkort.
19. Winston
Titlen er øverst, og en række sociale ikoner vises langs bunden. Det passer til teamgitter, hvor hver person har sociale profiler.
20. Selena
Billedet krymper inde i en ramme, mens titlen og beskrivelsen sidder nær toppen. Det passer til lookbooks og produktfotografering.
21. Terry
Billedet bevæger sig ind i et mindre vindue på en mørk baggrund, med titlen nederst til venstre og sociale ikoner. Det passer til højttaler- og personalekort.
22. Phoebe
Titlen er centreret med en række sociale ikoner direkte under den. Det passer til simple profilkort.
23. Apollo
Titlen sidder øverst til højre og beskrivelsen nederst til højre ved siden af en kort lodret linje. Den passer til minimale porteføljefliser.
24. Kira
Titlen er øverst med sociale ikoner i et lyspanel under den, efterfulgt af beskrivelsen. Det passer til teammedlemmer med en rolle på én linje.
25. Steve
Titlen og beskrivelsen vises hver på deres egen hvide bjælke på tværs af billedet. Det passer til etiketter med høj kontrast på travle fotos.
26. Moses
Titlen sidder i en boks øverst til venstre og beskrivelsen i en anden boks nederst til højre. Det passer til todelte etiketter som et navn og en pris.
27. Jazz
Titlen og beskrivelsen er centreret, og diagonale linjer skærer på tværs af hjørnerne. Det passer til event- og musikkunstværker.
28. Ming
En ramme omgiver midten med titlen over beskrivelsen. Den passer til formelle kort som priser eller certifikater.
29. Lexi
Titlen er øverst til venstre, og beskrivelsen sidder nederst til højre inde i en buet linje. Den passer til legende produkt- og livsstilsbrikker.
30. hertug
Titlen er øverst og beskrivelsen sidder i en boks nederst til venstre. Det passer til kort med en kort etiket, der skal læse som et tag.
Alle 30 billede svæve effekter i én tabel
Denne tabel viser hver effekt med de tekstlag, den viser, og om den har brug for Pro.
| Effekt | Viser på hover | har brug for pro |
|---|---|---|
| lilje | Titel og beskrivelse | ingen |
| Sadie | Titel og beskrivelse | ingen |
| roxy | Titel og beskrivelse | ingen |
| Bubba | Titel og beskrivelse | ingen |
| Romeo | Titel og beskrivelse | ingen |
| layla | Titel og beskrivelse | ingen |
| honning | Titel og undertitel | ingen |
| Oscar | Titel og beskrivelse | ingen |
| marley | Titel og beskrivelse | Ja |
| rubin | Titel og beskrivelse | Ja |
| milo | Titel og beskrivelse | Ja |
| dexter | Titel og beskrivelse | Ja |
| Sarah | Titel og beskrivelse | Ja |
| zoe | Titel, beskrivelse og sociale ikoner | Ja |
| chico | Titel og beskrivelse | Ja |
| Julia | Titel og tre linjer | Ja |
| Goliat | Titel og beskrivelse | Ja |
| hera | Titel og sociale ikoner | Ja |
| Winston | Titel og sociale ikoner | Ja |
| Selena | Titel og beskrivelse | Ja |
| terrøst | Titel og sociale ikoner | Ja |
| Phoebe | Titel og sociale ikoner | Ja |
| apollo | Titel og beskrivelse | Ja |
| kira | Titel, beskrivelse og sociale ikoner | Ja |
| steven | Titel og beskrivelse | Ja |
| Moses | Titel og beskrivelse | Ja |
| jazz | Titel og beskrivelse | Ja |
| ming | Titel og beskrivelse | Ja |
| lexi | Titel og beskrivelse | Ja |
| hertug | Titel og beskrivelse | Ja |
Sådan tilføjes en af disse effekter i Elementor
Tilføjelse af en effekt tager én widget og én dropdown.
- Rediger din side med Elementor og træk Billedhover-effekter widget på det.
- Upload billedet under Effekter & Billede.
- Vælg effekten ved navn fra Hover Effekt.
- Udfyld navn og art. Effekter med ikoner viser en Social Links sektion også.
- bestemme Links eller Popup? hvis et klik skulle føre et sted hen.
For et gitter skal du placere én widget pr. kolonne og bruge den samme effekt på tværs af rækken. Vores trin for trin guide til tilføjelse af billede hover effekter i Elementor dækker de indbyggede muligheder også. For billedtekster, der forbliver på billedet, se Elementortekst over billede.
Ofte stillede spørgsmål
Hvad er image hover effekter?
Billedsvæveeffekter er animationer, der kører, når en besøgende flytter markøren hen over et billede. Billedet kan zoome, mørkere eller ændre farve, og en titel eller beskrivelse glider eller falmer ofte ind over det. De kaldes også billedslyngningseffekter eller billedoverlejringer.
Hvilke billede hover effekter arbejde uden Master Addons Pro?
Otte af de 30: Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey og Oscar. De er de første otte poster i Hover Effect dropdown. De resterende 22, fra Marley til Duke, har brug for Master Addons Pro.
Kan jeg bruge en anden svæveeffekt på hvert billede?
Ja. Hver Image Hover Effects widget indeholder et billede og en effekt, så hvert kort i et gitter kan have sin egen. For en ryddelig side skal du holde en effekt pr. række eller pr. sektion.
Har disse billede hover effekter brug for brugerdefinerede CSS?
Nej. Du vælger effekten fra en dropdown, og widgetten leverer CSS'en. Farver, opacitet og typografi er indstillet i fanen Stil. Hvis du foretrækker at skrive CSS selv, kan et par linjer på Elementors Billed-widget producere enkle effekter som zoom eller gråtoner.
Hvilken svæveeffekt er bedst for en holdsektion?
Effekter med sociale ikoner passer til holdkort: Zoe, Hera, Winston, Terry, Phoebe og Kira. Zoe og Kira viser også en beskrivelse, som fungerer som personens rolle. Alle seks har brug for Master Addons Pro.
Endelige tanker
Disse 30 billede hover effekter dækker de fleste layouts, du skal bruge: hjørne billedtekster, centrerede rammer, barer, paneler og ikon rækker. Vælg efter den tekst, du har. En kort titel passer til Lily eller Oscar, en længere beskrivelse passer til Goliath, og sociale links kalder for Zoe eller Winston.
de Widget-side for billedhover-effekter har live kort at prøve, og den prissætning side oplister de planer, der omfatter alle 30.
Relateret læsning
