Elementor Image Hover Effects: 30 Hover Animationer til billeder
Et statisk billede sidder bare der. Tilføj billede svæve effekter og det samme billede begynder at gøre noget arbejde: en titel glider ind, en beskrivelse toner op, og et klik sender folk til et link eller åbner en fuld popup. Image Hover Effects widget til Elementor leveres med 30 hover animationer (8 i det gratis plugin og 22 mere med Pro), og du sætter dem op uden at skrive en linje af CSS. Det passer til de steder, hvor et billede skal bære en titel, en billedtekst og en handling: porteføljer, teamgitter, servicekort, produkt showcases.
Vælg en effekt, vælg hvad klikket gør, og stil hvert lag, så det passer til dit design. Det du ender med er et billedkort, folk rent faktisk stopper på i stedet for at rulle forbi. Videoen nedenfor går gennem det hele, viser hver animation, og opsætningen tager et par minutter.
Hvad er Image Hover Effects?
En billedsvæveeffekt er en animation, der udløses, når nogen flytter musen hen over et billede. I stedet for at forblive flad reagerer billedet. Det kan zoome, sløre, ændre farve eller skubbe et tekstpanel til syne. Du vil også se dem kaldet billed rollover effekter eller foto svæve effekter, og de alle gør det samme: tage et almindeligt billede og gøre det læse som “der er mere her, klik mig.”
Du kan bygge alt dette i hånden med brugerdefineret CSS. Det betyder at skrive overgangene, få dem til at opføre sig på mobilen og gå tilbage i koden, hver gang designet skifter. Master Addons-widgetten håndterer det visuelt inde i Elementor, så du får simple billedsvæveeffekter uden at åbne en kodeeditor. Hvis du vil se resten af værktøjssættet, skal du gennemse Master Addons widgets og udvidelser eller den Elementor animationsfunktioner.
30 hover animationer, 8 af dem gratis
Første indtryk sker på hover. Du får et bibliotek af CSS animationer, der bringer din titel og beskrivelse i glat, så teksten ankommer i stedet for bare popping på skærmen. Anvend enhver effekt med et klik, og derefter cykle gennem dem i editoren, indtil en passer til billedet. Jeg prøver normalt tre eller fire, før afregning, da en effekt, der ser godt ud på et bredt landskab skud kan føle sig ud på en stram portræt afgrøde.
- Udton og zoom: billedet falmer eller skaleres op, mens teksten toner ind.
- Slide (op, ned, venstre, højre): et billedtekstpanel glider ind fra enhver kant.
- Skub og afslør: billedet skifter for at give plads til titlen og beskrivelsen.
- Flyd og glans: et lille løft og et let feje hen over billedet.
- Otte effekter er gratis: Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey og Oscar. Pro tilføjer 22 mere, fra Marley til Duke.
- Kører på CSS: bevægelsen forbliver glat, fordi den ikke læner sig op af tunge scripts.
- Hurtig at teste: byt effekter i editoren og se ændringen med det samme.
Smart Linking og Popup-indhold på Klik
Du bestemmer, hvad der sker, når nogen klikker på kortet. Peg det på en hvilken som helst URL med et standardlink, eller, med Pro, skift handlingen til Popup og hold folk på siden. Popup'en er heller ikke begrænset til tekst: indstil Content Type til Gemt sektion og det trækker i enhver Elementor skabelon, du allerede har bygget. Det gør et billedkort til en døråbning til en fuld bio, et produkt spec ark, eller en kontaktformular, og den besøgende aldrig forlader siden.
- To klikhandlinger: send trafik ud med et link, eller hold folk på stedet med en popup (Pro).
- Rigtige skabeloner i popup (Pro): vis et billede, en tekst eller et fuldt layout fra dit bibliotek.
- Drille, så fortæl: billedet er krogen, og popup'en bærer detaljen.
Fuld indhold og stilkontrol
Du styrer, hvordan kortet ser ned til detaljen. Upload dit billede og indstil dets opacitet og filter separat for de normale og svævende tilstande. Tilføj en overskrift (vælg det rigtige HTML-tag, så det hjælper din sidestruktur) og en beskrivelse, og stil derefter hvert stykke på egen hånd med sine egne farver, type, skygger og mellemrum.
- Separat titel og beskrivelse: stil hver enkelt, så hierarkiet læser tydeligt.
- Billedfiltre: gråtone-til-farve-tricket på svævefly ser stadig godt ud og er en ændring, der er indstillet til én gang her.
- Kortramme: baggrund, kanter og kasseskygge, plus afrundede hjørner og polstring med Pro, så den sidder lige i dit layout.
Sådan tilføjes Image Hover Effects i Elementor?
Du kan have et fungerende svævekort på under to minutter. Ingen CSS, ingen kortkoder.
- Installer og aktiver Master Addons, og rediger derefter enhver side med Elementor.
- Søg i widgetpanelet efter Image Hover Effects og træk det over på dit layout.
- Upload dit billede og tilføj en titel og beskrivelse.
- Åbn Hover Effect dropdown og vælg en animation. Otte er gratis og 22 mere kommer med Pro.
- Indstil klikhandlingen til et link, eller til en popup med en gemt skabelon, hvis du har Pro.
- Style titlen, beskrivelsen og beholderen, og udgiv derefter.
En ting, der er værd at gøre, før du udgiver: forhåndsvisning af kortet på en telefon. Hover findes ikke ved berøring, så kontroller, at trykadfærden giver mening (mere om det i FAQ). For hver indstilling, der er lagt i rækkefølge, skal du følge Image Hover Effects dokumentation.
Hvor skal man bruge Hover Effects på billeder?
- Teamgitre: navn og rolle på hover, derefter en fuld bio i en popup på klik. Her er sådan opbygger du en teammedlemmer sektion.
- Porteføljer og gallerier: en projekttitel og et “Se casestudie”-link over hvert billede.
- Servicekort: en kort beskrivelse og et link til servicesiden.
- Produkt montrer: drille produktbilledet, og åbn derefter specifikationerne i en popup.
- Blog og kategori fliser: en hover-tekst på billedstyret navigation.
For flere måder at sætte tekst og billeder sammen, læs 25 Elementor tekst-over-billede teknikker. Relaterede billedwidgets omfatter de Billedkarrusel, den Filtrerbart billedgalleri, den Billede Hotspot widget og Avanceret billede widget.
Ofte stillede spørgsmål til billedsvæveeffekter
Vil disse svæveeffekter virke på mobile enheder?
De er bygget til desktop, hvor der er en mus til at svæve. På en touchscreen effekten normalt brande på det første tryk for at vise indholdet, og det andet tryk følger linket eller åbner popup. Så planlæg for to tryk på mobil, og sørg for, at teksten forbliver læsbar, når den viser.
Hvordan opretter jeg simple billedsvæveeffekter uden at skrive CSS?
Drop Image Hover Effects widget på din side, uploade et billede, tilføje en titel og beskrivelse, og vælg en animation fra dropdown. Det er det, ingen CSS. Widgetten skriver CSS for dig bag kulisserne, så selv en temmelig involveret hover kort forbliver let at sammensætte.
Kan jeg åbne en teambio eller produktdetaljer i en popup ved klik?
Ja, med Pro. Sæt navnet i Titlen og rollen i Beskrivelsen, indstil klikhandlingen til Popup, og vælg Indholdstype: Gemt sektion. Byg bio som skabelon i Elementor, og vælg den her. Klik på billedet, og det fulde layout åbnes i popup'en.
Er alle 30 billedsvæveeffekter gratis?
Nr. Otte effekter er gratis: Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey og Oscar. De andre 22 kommer med Master Addons Pro, sammen med popup-indhold, afrundede hjørner og polstring kontrol. Titlen, beskrivelsen, linket og billedfiltrene fungerer alle i den gratis version.
Vil mange animerede billedkort bremse mit websted?
Effekterne kører på CSS, så en håndfuld på en side er ikke noget problem. Hvad der faktisk bremser tingene ned er billedvægt, så komprimer dine billeder først. Når du er forbi 20 eller deromkring kort på én side, skal du tænde for doven indlæsning, og den første maling forbliver hurtig.
Kan jeg bruge forskellige hover-effekter på forskellige billeder?
Indstillingerne dækker et kort ad gangen. For at blande effekter skal du tilføje en separat Image Hover Effects-widget for hvert billede og indstille dem uafhængigt. Sådan får du et galleri, hvor kortene ikke alle animerer på samme måde.
Hvad er fordelen ved en "Gemt Sektion" i popup over almindelig tekst?
Gemt sektion er en Pro-indstilling, og den giver dig den fulde Elementor-editor inde i popup'en. I stedet for almindelig tekst kan du tilføje billeder, knapper, kolonner, videoer eller formularer, så popup'en ligner resten af dit websted i stedet for en blottet tekstboks.
Trending Elementor Widgets & Udvidelser
Byg sofistikerede websteder på kortere tid.
Glasmorfisme
Container ekstraudstyr
Mønstre
Post/Page Duplicator
