Image Hover Effects

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.

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 det, og det kan afsløre en titel, en beskrivelse og en knap eller et link, hvor bevægelsen kommer fra en forudindstillet effekt. De navngivne effekter (Sadie, Lily, Roxy og meget mere) animerer hver billedet og teksten på deres egen måde.

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 det i en popup.

Vælg en svæveeffekt #

The Hover Effekt dropdown bærer en lang liste af navngivne CSS-effekter. 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: 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, med en Skriv med AI-mulighed.
• HTML Tag: kursniveauet, H1 til H6.

Tilføj beskrivelsen og linket #

Tilbage i Effekter & Billede sektion, den Indholdstype og Content felter indstiller billedteksten, der vises under titlen. Det er her den understøttende linje går, og en knap, hvis du vil have en.

• Indholdstype: vælg tekst eller en knap for overlejringsindholdet.
• Indhold: billedtekstteksten, 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, 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 #

Indpakning #

Widgetten Image Hover Effects 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.