Nøgle takeaways
- Elementor-svæveeffekter til billeder live i billedwidgettens stilfane under en Hover-fane med fire kontroller: Opacitet, CSS-filtre, overgangsvarighed og Hover-animation.
- En gråtone-til-farve-svæveeffekt i Elementor behøver ingen kode: Indstil mætning til 0 under CSS-filtre på fanen Normal og tilbage til 100 på fanen Svæve.
- Elementors Hover Animation-forudindstillinger, såsom Grow, flytter hele billedet, og Grow-forudindstillingen skalerer et billede til 110 procent af dets størrelse på hover.
- Elementors Image-widget kan ikke vise en titel eller beskrivelse over billedet på hover, så tekstoverlejringer har brug for en container-løsning, brugerdefineret CSS eller en addon-widget.
- Master Addons Image Hover Effects-widgetten har 30 navngivne hover-effekter, der animerer en titel og beskrivelse over billedet, valgt fra en Hover Effect-dropdown.
Du kan tilføje Elementor-svæveeffekter til et billede på tre måder. Billede-widgetten har indstillinger for opacitet og CSS-filter for svævetilstanden. Den har også Hover Animation-forudindstillinger, der flytter billedet. For en titel og beskrivelse, der vises over billedet, skal du have en widget bygget til det, som f.eks Billedhover-effekter.
Denne vejledning dækker hver rute med de nøjagtige indstillinger, testet på Elementor 4.3. Start med de to første, hvis du kun vil have billedet til at reagere, og spring til den tredje, hvis du vil have tekst på billedet.
Indholdsfortegnelse
Hvor svæveindstillingerne er i Elementor
Vælg en Image-widget, åbn måde tab og se under afsnittet Billede. Under størrelseskontrollerne er der to faner, Normal og Hover. Alt på fanen Hover gælder kun, mens markøren er over billedet. Elementor forklarer ideen i sin introduktion til svæveeffekter.
| Control | Hvad det gør på hover |
|---|---|
| Opacitet | Udtoner billedet ind eller ud, fra 0 til 1 |
| CSS-filtre | Ændrer sløring, lysstyrke, kontrast, mætning og nuance |
| Overgangsvarighed | Indstiller hvor lang tid ændringen tager, på sekunder |
| svæve animation | Afspiller en forudindstillet bevægelse som Grow |
Vej 1: Opacitet og CSS-filtre
Brug opacitets- og CSS-filtre, når selve billedet skal ændres ved svævning. Det klassiske eksempel er et foto, der sidder i sort-hvid og bliver til farve, når markøren ankommer.
- Vælg Image-widgetten, og åbn måde.
- På normal fane, klik på blyanten ved siden af CSS-filtre og træk Mætning til 0. Billedet bliver gråt.
- Skift til svæve fane, åben CSS-filtre igen og sæt Mætning til 100.
- bestemme Overgangsvarighed til omkring 0,4, så farven falmer ind.
- Valgfrit: indstil Opacitet til 0,85 på Normal og 1 på Hover for en let lysere.
De samme to faner giver dig en sløring, der rydder, et svagt billede, der lysner, eller et nuanceskift. Hold overgangen mellem 0,3 og 0,5 sekunder. Kortere end det ligner et flimmer, og længere føles langsomt.
Way 2: Hover Animation-forudindstillinger
Hover Animation flytter hele billedet, når markøren er over det. Det er én dropdown nederst på Hover-fanen, og den behøver ingen anden opsætning.
- Vælg Image-widgetten, og åbn måde, så den svæve fane.
- åbne lukke op svæve animation og vælg en forudindstilling. Grow er den, de fleste ønsker.
- Se et eksempel på siden, og flyt markøren hen over billedet.
Grow forstørrer billedet forbi dets oprindelige kanter, så det kan overlappe sine naboer i et stramt gitter. Hvis du vil have billedet til at zoome inde i en fast ramme, tager det et par linjer CSS.
Vej 3: En widget til tekst over billedet
Brug en dedikeret widget, når en titel og beskrivelse skal vises over billedet på hover. Elementors Image-widget viser sin billedtekst under billedet og har ingen indstilling til at sætte tekst ovenpå.
Disse trin bruger widgetten Billedhover-effekter fra Master Addons.
- Rediger siden med Elementor, søg i widgetpanelet efter Billedhover-effekter og træk det ind på siden.
- under Effekter & Billede, uploade billedet.
- Åbn Hover Effekt dropdown og vælge en af de 30 effekter. De er opført ved navn, begyndende med Lily, Sadie, Roxy og Bubba.
- Skriv den navn og the art i deres egne sektioner.
- bestemme Links eller Popup? hvis et klik skulle gå et sted hen.
- I fanen Stil skal du indstille overlejringsfarven, billedopaciteten for normal og svæve og typografien for hvert tekstlag.
Prøv effekterne, før du installerer noget. de Widget-side for billedhover-effekter har otte live-kort, du kan svæve, plus den fulde liste med 30 effekter.
Otte af effekterne fungerer uden en Pro-licens, og 22 har brug for Master Addons Pro. Hver widget indeholder ét billede, så et gitter af svævekort er flere widgets side om side.
Video tutorial
Denne fire minutter lange video opsætter widgetten Image Hover Effects fra en tom side.
Hvilken vej skal du bruge?
Vælg efter, hvad der skal ændres ved svæve: billedet, dets placering eller teksten ovenpå.
| Du vil | Brug | Behov |
|---|---|---|
| Gråtoner til farver, sløre til skarpe, dæmpe til lyse | CSS-filtre og opacitet på fanen Hover | elementor |
| Billedet til at vokse eller pulsere | svæve animation | elementor |
| En zoom, der bliver inde i sin ramme | En CSS-klasse og et par linjer af CSS | Elementor og et sted at tilføje CSS |
| En titel og beskrivelse over billedet | widget til billedhover-effekter | Master Addons |
| Et andet billede, der erstatter det første | Avanceret billedwidget eller en containerbaggrund | Master Addons, eller Elementor alene |
For tekst og billeder kombineret på andre måder, se Elementortekst over billede.
Virker svæveeffekter på telefoner?
Ikke som hover, fordi en berøringsskærm ikke har nogen pointer at svæve med. Elementors Style-faneeffekter udløses ikke på en telefon, hvilket ikke skader en farveændring.
Med Image Hover Effects widget viser det første tryk normalt teksten, og det andet tryk følger linket. Hvis teksten er afgørende, såsom en pris eller et navn, skal du også sætte den et sted, der er synligt på små skærme.
Ofte stillede spørgsmål
Hvordan tilføjer jeg en svæveeffekt til et billede i Elementor?
Vælg Image-widget, åbn fanen Style, og skift til fanen Hover. Indstil Opacity eller CSS-filtre for hover-tilstanden, eller vælg en Hover Animation som Grow. Tilføj en Overgangsvarighed på 0,3 til 0,5 sekunder, så ændringen er jævn.
Har Elementor billede svæve effekter uden et plugin?
Ja. Billede widget i Elementor har hover kontrol for opacitet, CSS filtre og en Hover Animation forudindstillet. De ændrer eller flytter billedet. Tekst over billedet har brug for en addon widget eller brugerdefineret CSS.
Hvordan får jeg et billede til at gå fra sort og hvid til farve på svæve i Elementor?
Åbn CSS-filtre under fanen Billedwidgets Style under fanen Normal, og indstil Mætning til 0. Åbn derefter CSS-filtre under fanen Svæve og indstil Mætning til 100. Indstil Overgangsvarighed til omkring 0,4 sekunder.
Hvordan viser jeg tekst, når jeg holder musen over et billede i Elementor?
Brug en widget, der er lavet til det. Med Master Addons skal du tilføje widgetten Image Hover Effects, uploade billedet, skrive en Titel og Beskrivelse og vælge en Hover Effect. Teksten forbliver skjult, indtil markøren er over billedet.
Hvorfor virker min Elementor hover effekt ikke?
Kontroller, at indstillingen er på fanen Svæve og ikke fanen Normal, og at Overgangsvarighed er over 0. På en telefon eller tablet er der ingen svirre, så test med en mus. Hvis du bruger brugerdefineret CSS, skal du bekræfte, at klassenavnet på widgetten matcher det i koden.
Endelige tanker
Elementor hover effekter til billeder kommer i tre slags. Fanen Stil ændrer, hvordan billedet ser ud, Hover Animation flytter det, og en tekstoverlejring har brug for en widget. Start med de indbyggede kontroller, da de ikke koster noget at prøve.
Når du vil have en titel og beskrivelse på billedet, skal widget til billedhover-effekter har 30 effekter klar til at vælge imellem, og den prissætning side viser hvilken plan der omfatter dem alle.
Relateret læsning
