Sådan zoomer eller ændrer du et billede på Hover i Elementor

Nøgle takeaways

• Elementor har ingen enkelt indstilling til at ændre et billede ved svævning, så byttet udføres med en containerbaggrund bag billedet eller med en widget, der accepterer et andet billede.
• Måden uden plugin til at ændre et billede på svæve i Elementor er at indstille det andet billede som en containerbaggrund og indstille billedwidgettens svæveflade Opacitet til 0.
• Master Addons Advanced Image-widgetten bytter billeder med én switch, Display Hover Image, som findes i afsnittet Hover Image på fanen Content.
• Elementors forudindstillede Hover Animation Grow zoomer et billede til 110 procent på hover, og billedet vokser forbi dets oprindelige kanter.
• En zoom på svæve, der forbliver inde i sin ramme, har brug for en CSS-klasse på Image-widgetten og tre korte CSS-regler, der skalerer billedet inde i et skjult overløb.

For at ændre et billede på hover i Elementor, sætter du et andet billede bag eller inde i det første og afslører det, når markøren ankommer. Elementor kan gøre dette uden et plugin gennem en container baggrund, og en hover billede widget gør det med én switch. Zooming på hover tager en forudindstillet til en grundlæggende zoom, eller et par linjer af CSS for en zoom, der forbliver i sin ramme.

Alle fire metoder nedenfor blev bygget og testet på Elementor 4.3.

Hvilken metode skal man bruge

To af disse metoder bytter billedet og to zoomer det. Inden for hvert par bruger den ene kun Elementor, og den anden er hurtigere eller pænere.

Ændre et billede på hover med en containerbaggrund

Denne metode behøver ingen plugin. Det andet billede er baggrunden for en beholder, og det første billede sidder oven på det som en normal Image widget. På hover, det øverste billede falmer ud og baggrunden viser igennem.

1. Tilføj en beholder og sæt dens polstring til 0.
2. I containerens måde fane, åben Baggrund, skal du vælge Klassisk og uploade det billede, der skal vises på hover. Indstil Position til Center Center og Størrelse til Cover.
3. Træk en spejlbillede widget ind i beholderen og vælg det billede, der skal vises først.
4. Vælg Image widget, åben måde og skift til svæve fane.
5. bestemme Opacitet til 0 og Overgangsvarighed til omkring 0,4.

Brug to billeder med samme proportioner. Beholderen tager sin højde fra Image-widgeten, så en baggrund med en anden form bliver beskåret.

Ændre et billede på hover med en hover image widget

En widget med et svævebilledfelt foretager det samme bytte fra ét panel. Trinnene nedenfor bruger Avanceret billedwidget fra Master Addons.

1. Søg i widgetpanelet efter Avanceret billede og træk det ind på siden.
2. I spejlbillede sektion, vælg hovedbilledet.
3. Åbn Hover Image sektion og tænd Vis Hover Image.
4. Vælg det andet billede i det felt, der vises.
5. Forhåndsvis siden og hold markøren.

Widgetten har også et bånd, et link og en lysboks, som passer til produktbilleder: frontvisning først, back view på hover, med et nyt bånd i hjørnet.

Vil du have tekst på hover? Billedhover-effekter animerer en titel og beskrivelse over ét billede, med 30 effekter at vælge imellem.

Zoom et billede på hover med Grow-forudindstillingen

Den hurtigste zoom er en forudindstilling. Vælg Image widget, åben måde, skifte til den svæve faneblad og sæt svæve animation til Grow. Billedet skaleres til 110 procent, mens markøren er over det.

Grow fungerer godt for et enkelt billede med plads omkring det. I et stramt gitter overlapper det billederne ved siden af det, så brug den næste metode der.

Zoom et billede på hover inde i sin ramme

For en zoom, der bliver inde i billedets egen boks, skal du give Image-widgetten en CSS-klasse og tilføje tre regler. Widgetten beholder sin størrelse, og billedet skaleres op inde i den.

1. Vælg Image-widgetten, og åbn fremskreden. Ind CSS klasser, type hover-zoom.
2. Tilføj CSS nedenfor til dit websted.

.hover-zoom { overflow: hidden; border-radius: 10px; }
.hover-zoom img { transition: transform 0.4s ease; display: block; }
.hover-zoom:hover img { transform: scale(1.08); }

Hvor CSS går afhænger af din opsætning. Elementor Pro har en Custom CSS boks i fanen Avanceret. Uden det, brug Udseende, Tilpas, Yderligere CSS i WordPress, eller den Brugerdefineret CSS-udvidelse i Master Addons. Skift 1.08 til 1.15 for en stærkere zoom.

Fire ting, der går galt

De fleste problemer med disse effekter kommer fra billedstørrelser og fra test på den forkerte enhed.

1. De to billeder har forskellige proportioner. Byttet hopper eller beskærer derefter. Eksporter begge i samme bredde og højde.
2. Det zoomede billede dækker indhold i nærheden. Grow har ingen ramme. Brug CSS-metoden, når billeder sidder tæt sammen.
3. Der sker ikke noget på en telefon. Touchskærme har ingen svæve. Sørg for, at det første billede fungerer alene, fordi telefonbesøgende måske aldrig ser det andet.
4. Hover-billedet er tungt. Komprimer begge filer, fordi et stort andet billede kan vises som et tomt blitz på den første hover.

Ofte stillede spørgsmål

Endelige tanker

Hvis du vil ændre et billede på svæve i Elementor, skal du bruge en beholderbaggrund med en fading Image-widget eller en widget med et svævebilledfelt. Hvis du vil zoome, skal du bruge Grow til et hurtigt resultat og CSS-klassen, når billedet skal forblive i sin ramme.

de Avanceret billedwidget håndterer byttet i ét panel, og Billedhover-effekter dækker tekstoverlejringer.

Relateret læsning

• Skyder til sammenligning af elementorbilleder til før og efter
• Elementortekst over billede
• Elementor billedboks
• Sådan tilføjes billedsvæveeffekter i Elementor (3 måder)
• 30 billede hover effekter til Elementor