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ømmeeffekt er en animation, der affyres, når nogen bevæger musen over et billede. I stedet for at holde sig fladt, reagerer billedet. Det kan zoome, sløre, ændre farve eller skubbe et tekstpanel til syne. Den mest almindelige slags er en billedoverlejring, hvor en titel og en beskrivelse vises som tekst over billedet. 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.
Eksempler på billedsvømningseffekt
Flyt markøren over hvert kort, eller tryk på den på en telefon for at se effekten. Disse otte er de effekter, der fungerer uden Pro, og hvert kort er en live-image-hover-effekt-widget.
Ella & Sam
Somerset · juni
lilje
Grækenland
11 dage
Sadie
stueetagen
cardio og maskiner
roxy
ånd
12.400 miles
Bubba
klippehus
4 seng · EPC b
Romeo
Galleri Væg
Bristol · 2025
layla
Startere Ni retter
honning
Overtøj
87 stykker
Oscar
Alle 30 billedhover-effekter
Rullemenuen Hover Effect viser 30 effekter efter navn. Hver enkelt animerer titlen og beskrivelsen over billedet, og de adskiller sig i, hvordan overlejringen, teksten og billedet bevæger sig.
| Effekt | har brug for pro | Effekt | har brug for pro |
|---|---|---|---|
| lilje | ingen | Julia | Ja |
| Sadie | ingen | Goliat | Ja |
| roxy | ingen | hera | Ja |
| Bubba | ingen | Winston | Ja |
| Romeo | ingen | Selena | Ja |
| layla | ingen | terrøst | Ja |
| honning | ingen | Phoebe | Ja |
| Oscar | ingen | apollo | Ja |
| marley | Ja | kira | Ja |
| rubin | Ja | steven | Ja |
| milo | Ja | Moses | Ja |
| dexter | Ja | jazz | Ja |
| Sarah | Ja | ming | Ja |
| zoe | Ja | lexi | Ja |
| chico | Ja | hertug | Ja |
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.
Tekst over billede: Titel, beskrivelse og overlejringsstyling
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.
Elementor Hover Options vs Image Hover Effects Widget
Elementors egen billedwidget har svæveindstillinger på fanen Stil: Opacitet, CSS-filtre og en hover-animation såsom Grow eller Pulse. De ændrer selve billedet. De kan ikke lægge tekst over billedet, som er det hul, denne widget udfylder.
| Elementor billedwidget | widget til billedhover-effekter | |
|---|---|---|
| uigennemsigtighed på svævebane | Ja | Ja |
| CSS-filtre på svævebane | Ja | Ja |
| svæve animation | Forudindstillinger, der flytter hele billedet | 30 effekter, der animerer overlejringen, titlen og beskrivelsen |
| tekst over billedet | ingen . Billedteksten sidder under billedet. | Titel og beskrivelse på billedet |
| tekst, der vises på svævebane | ingen | Ja |
| Klik på Handling | link eller lysboks | link, eller en popup med pro |
| Skift til et andet billede på svæv | ingen | ingen Brug Avanceret billede for det. |
Billede hover-effekter på et øjeblik
De vigtigste fakta om widgetten i én tabel.
| særpræ | Billedhover-effekter |
|---|---|
| Svæveeffekter | 30. 22 af dem har brug for pro. |
| tekst på billedet | Titel og beskrivelse, med et HTML-tag fra H1 til H6 for titlen |
| Klik på Handling | Ingen, et link eller en popup (pro) |
| Popup-indhold (pro) | tekst, et billede eller en gemt sektion, widget eller sideskabelon |
| Billedindstillinger | opacitet og filtre, indstillet separat til normal og svæve |
| Andet billede på svæv | ingen |
| berøringsskærme | Det første tryk viser teksten. Det andet tryk følger linket. |
| Behov | Elementor og Master Addons |
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 Billedhover-effekter 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.
Hvordan viser jeg tekst, når nogen svæver over et billede i Elementor?
Tilføj widgeten Image Hover Effects, upload billedet, skriv en titel og en beskrivelse og vælg en hover-effekt. Teksten forbliver skjult, indtil markøren er over billedet, og animerer derefter ind. Elementors egen billedwidget har ingen indstilling for tekst over billedet.
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.
Hvordan zoomer jeg et billede på svæv i elementor?
For en almindelig zoom skal du vælge Elementors billedwidget, åbne stilfanen og indstille Hover-animation til at vokse. I Image Hover Effects-widgetten skalerer flere effekter billedet, mens titlen og beskrivelsen kommer ind.
Kan jeg ændre billedet på svæv?
Ikke med denne widget. Det gemmer ét billede og animerer overlejringen og teksten oven på det. For at skifte til et andet billede på svæv, brug Avanceret billede widget og tænd for skærmbilledet Hover.
Trending Elementor Widgets & Udvidelser
Byg sofistikerede websteder på kortere tid.
Glasmorfisme
Container ekstraudstyr
Mønstre
![Master Addons Post/Page Duplicator udvidelse til Elementor: MA Duplicator række link i WordPress Pages liste oprettelse af en Landing Page - [Duplikeret # 128] udkast](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post/sideduplikator
