Et billede, der afslører en titel og billedtekst på hover, gør et fladt galleri til noget, folk gerne vil røre ved. Den Image Hover Effects widget i Master Addons til Elementor ombryder ethvert billede i en CSS-svæveanimation, så en overskrift, en beskrivelse og et linkdias, falmer eller zoomer til syne, når markøren lander på den.
Denne side er indstillingsreferencen. For live demoer af effekterne og hvad der er gratis eller Pro, se Elementor billede hover effekter widget page.
Du vælger en af de navngivne effekter, slipper i et billede, tilføjer overlejringsteksten og styler derefter farverne og filtrene. Ingen brugerdefineret CSS nødvendig. Denne vejledning dækker hver indstilling i widgetten.
Hvad Image Hover Effects-widgetten gør #
Widgetten tager ét billede og taber en animeret overlay på toppen. Hold markøren over den, og den kan afsløre en titel, en beskrivelse og en knap eller et link, hvor bevægelsen kommer fra en forudindstillet effekt. Der er 30 navngivne effekter. Otte er gratis (Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey og Oscar) og 22 mere kommer med Master Addons Pro.
Tre faner kører det. Content holder effekten, billedet og overlejringsteksten. Style håndterer billedopacitet, filtre, kanter og titel- og beskrivelsesfarverne. Advanced er den sædvanlige Elementor-afstand og synlighed.
Før du starter #
- WordPress med Elementor installeret og aktiv.
- Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
- Et billede plus den titel og billedtekst, du vil vise på svæve.
Sådan tilføjes Image Hover Effects-widgetten #
I Elementor-editoren skal du åbne Elementer panel og søg efter Image Hover Effects, eller rul til afsnittet Mastertilføjelser (widgetsene bærer et lilla MA-badge). Træk det over på siden, og det indlæses med et eksempelbillede og en overlejring, du kan redigere.
Vælg effekt og billede #
Åbn Content fane. Den Effekter & Billede sektion er det sted, hvor du indstiller svæveanimationen og indlæser billedet.
- Hover Effekt: den navngivne animation brugt på hover (mere om dette næste).
- Upload billede: vælg billedet fra mediebiblioteket.
- Billedstørrelse og billedopløsning: afgrøden og opløsningen tjente.
- Links eller Popup?: gør hele billedet til et link, eller åbn en popup (popup-indhold har brug for Pro).
Vælg en svæveeffekt #
The Hover Effekt dropdown lister 30 navngivne CSS effekter. De første otte er gratis, og resten er markeret Pro. Hver enkelt animerer billedet og overlejringsteksten forskelligt, fra en blød fade til en billedtekst, der glider ind.
- Sadie, Lily, Layla: fade titlen og billedteksten ind over et mørklagt billede.
- Roxy, Bubba, Romeo: skub en kant eller et panel ind med teksten.
- Skat, Oscar, Marley (Pro): afslør en understregning eller en bevægende billedtekst.
- Zoom og slør varianter: skaler eller blødgør billedet bag teksten.
Vælg billedet #
Klik Upload billede for at åbne mediebiblioteket, vælg eller upload derefter dit billede. Uanset hvilken effekt du valgte, kører oven på dette billede.
Tilføj overskriften #
Åbn Overskrift sektion for titlen, der vises på hover. Skriv teksten, og indstil HTML-tagget, så det læses korrekt for SEO.
- Titel: overskriftsteksten. Hvis dit websted bruger Elementor AI, vises Elementors eget Skriv med AI-link også her.
- HTML Tag: kursniveauet, H1 til H6.
Tilføj beskrivelsen og linket #
Åbn Description sektion for at tilføje billedteksten, der vises under titlen på hover. Tilbage i Effekter & Billede, hvis du indstiller Links eller Popup? til Popup, den Indholdstype og Content felter bestemmer, hvad popup-vinduet viser. Popup-indhold har brug for Pro.
- Indholdstype: hvad popup-vinduet viser: et billede, en tekst, en gemt sektion, en gemt widget eller en gemt sideskabelon (Pro).
- Indhold: popup-teksten, redigeret i en fuld WYSIWYG-boks.
- Links eller Popup?: peg billedet mod en URL eller åbn det i en popup.
Style billedet og overlay #
Åbn Style fane. Den Image sektion styrer, hvordan billedet ser ud før og under svævningen, og det er der, meget af effekten faktisk kommer fra.
- Billedopacitet og Hover-opacitet: hvor synligt billedet er i hvile og på hover.
- Billedfilter og Hover Billedfilter: sløring, lysstyrke og kontrast for hver tilstand.
- Border, Border Radius (Pro), Box Shadow: rammen omkring billedet.
Under afsnittet Billede skal du adskille Title og Description sektioner håndterer farven og typografien af overlejringsteksten.
Almindelige brugstilfælde #
- Porteføljer afsløring af et projektnavn og link på hover.
- Teamgitre viser et navn og en rolle over hvert billede.
- Servicefliser med en titel og kort billedtekst pr. billede.
- Blogminiaturer det viser indlægstitlen på hover.
- Produktgallerier parring af et billede med et navn og en knap.
Tips til at arbejde med Image Hover Effects-widget #
- Brug klare billeder. Overlejringen gør billedet mørkere, så et optaget skud kan gøre teksten svær at læse. Et roligere billede med plads i midten fungerer bedst.
- Hold billedteksten kort. En linje under titlen læser bedre end et afsnit, der er proppet ind i overlejringen.
- Match effekten til indholdet. Subtile falmer passer til en portefølje; dristige dias passer til en promo.
- Indstil det rigtige overskriftsmærke. Brug H2 eller H3 til gallerititler, ikke H1, medmindre det er sidens hovedoverskrift.
- Test på mobil. Der er ingen hover ved berøring, så tjek overlejringen giver stadig mening, når nogen trykker i stedet.
Se video tutorial #
Foretrækker du at følge med på skærmen? Videovejledningen nedenfor går gennem Image Hover Effects-elementet fra start til slut og viser, hvordan effekterne, overlejringsteksten og stylingen fungerer i Elementor-editoren.
Ofte stillede spørgsmål #
Hvad er Image Hover Effects widget i Master Addons?
Det er en Elementor widget, der tilføjer en CSS hover animation til et billede. På hover det afslører en titel, en billedtekst, og et valgfrit link, med bevægelsen kommer fra en navngivet forudindstillet effekt. Alt er indstillet fra Elementor panel uden kode.
Hvor mange hover-effekter indeholder widgetten?
Tredive. Otte er gratis (Sadie, Lily, Roxy, Bubba, Romeo, Layla, Honey og Oscar) og de andre 22 kommer med Master Addons Pro. Hver enkelt animerer billedet og overlejrer tekst på en anden måde.
Kan jeg tilføje et link eller en knap til billedet?
Ja. Indstillingen Links eller Popup kan gøre hele billedet til et link i den gratis version. Med Pro kan den åbne en popup i stedet for at vise et billede, en tekst eller en gemt Elementor-skabelon.
Kan jeg vise en titel og billedtekst på hover?
Ja. Afsnittet Overskrift indstiller titlen og dens HTML-mærke, og feltet Beskrivelse tilføjer en billedtekst under den. Begge vises som en del af svæveanimationen, så billedet forbliver rent, indtil nogen svæver over det.
Virker billedsvæveeffekterne på mobilen?
Hover er en desktop interaktion, så touch-enheder har ingen ægte hover. Mange effekter viser stadig overlayet på tryk, men du bør teste på en telefon og holde nøgleteksten synlig eller tilgængelig, især hvis billedet også er et link.
Indpakning #
The Image Hover Effects widget forvandler et statisk billede til et interaktivt: Vælg en effekt, indlæs billedet, tilføj en titel og billedtekst, og stil derefter opaciteten, filtrene og teksten. For relaterede widgets, se Infoboks widget og the Flipbox widget, gennemse hele Master Addons widgets og udvidelser, og kontrollere de prissætning side for hvad hver plan indeholder.
