CSS-billedhover-effekter i Elementor (5 kopi-indsæt uddrag)

Nøgle takeaways

• CSS-billedsvæveeffekter i Elementor tager to trin: Tilføj et klassenavn til billedwidgetten under Avanceret, CSS-klasser, og indsæt derefter en CSS-regel, der er målrettet mod den pågældende klasse.
• De fem CSS-billedhover-effekter i denne vejledning er en zoom inde i rammen, gråtone til farve, et løft med en skygge, en mørk overlejring og en billedtekst, der glider op.
• Elementor Pro har en brugerdefineret CSS-boks i hver widgets Advanced-fane, og uden Pro kan den samme CSS gå i udseende, tilpasse, ekstra CSS.
• Elementors billedwidget udskriver sin billedtekst som en figenbillede inde i en figur, hvilket er det, der gør en glidende billedtekst mulig med CSS alene.
• Gråtone til farve- og opacitetsændringer behøver ingen CSS i Elementor, fordi billedwidgettens stilfane allerede har CSS-filtre og opacitet på en Hover-fane.

CSS-billedhover-effekter fungerer i Elementor på samme måde, som de fungerer overalt: en klasse på elementet og en regel med :hover. De eneste Elementor-specifikke dele er, hvor du skriver klassen, og hvor du indsætter CSS. Nedenfor er fem effekter, du kan kopiere, hver testet på Elementor 4.3 med standard Image widget.

Hvis du helst ikke vil røre kode, viser det sidste afsnit ruten uden kode med widget til billedhover-effekter.

Hvordan CSS hover effekter arbejde i Elementor

Hvert uddrag nedenfor følger det samme mønster. Du giver Image-widgetten en klasse, og CSS ændrer billedet inde i den widget, når markøren er over den.

1. Vælg Image-widgetten i Elementor.
2. Åbn fremskreden faneblad og find CSS klasser.
3. Skriv klassenavnet uden en prik, for eksempel hover-zoom.
4. Tilføj den matchende CSS til dit websted én gang. Ethvert billede med den klasse får derefter effekten.

Klassen lander på widgettens ydre element, og billedet er en img inde i den, så reglerne er målrettet .hover-zoom img.

Hvor kan man tilføje CSS

Du har fire steder at indsætte CSS, afhængigt af hvad der er installeret.

For klasser, du planlægger at genbruge, er et sted over hele webstedet det bedre hjem. Den Brugerdefineret CSS-udvidelse page forklarer, hvordan indstillingen Master Addons fungerer.

5 CSS-billedhover-effekter, der skal kopieres

Hver effekt har et klassenavn, CSS og et skærmbillede af resultatet før og under svævning.

1. Zoom inde i rammen

Billedet skaleres op, mens dets boks forbliver samme størrelse. Klassenavn: hover-zoom.

.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); }

2. Gråtoner til farve

Billedet sidder i sort og hvid og bliver til fuld farve på hover. Klassenavn: hover-color.

.hover-color img { filter: grayscale(100%); transition: filter 0.4s ease; }
.hover-color:hover img { filter: none; }

3. Løft med en skygge

Billedet bevæger sig et par pixels op og får en blød skygge, som et kort, der bliver samlet op. Klassenavn: hover-lift.

.hover-lift img { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover img { transform: translateY(-6px); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.18); }

4. Mørk overlay

Et mørkt lag toner ind over billedet. Det er bygget med et pseudo-element, så der er ikke behov for ekstra markup. Klassenavn: hover-dim.

.hover-dim { position: relative; }
.hover-dim::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.hover-dim:hover::after { opacity: 1; }

5. Billedtekst, der glider op

Billedets egen billedtekst skjuler sig under den nederste kant og glider op på hover. I Billede widget, sæt Billedtekst til Brugerdefineret billedtekst og skriv teksten først. Klassenavn: hover-caption.

.hover-caption figure { position: relative; overflow: hidden; margin: 0; }
.hover-caption figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px 18px; background: rgba(0, 0, 0, 0.6); color: #fff; transform: translateY(100%); transition: transform 0.35s ease; }
.hover-caption:hover figcaption { transform: translateY(0); }

Denne afhænger af, at billedteksten er der. Uden billedtekst udskriver Elementor ikke figuren og billedteksten, og reglen har intet at flytte.

CSS eller de indbyggede hover-indstillinger?

Kontrollér Elementors egne kontrolelementer, før du skriver CSS, fordi to af disse fem effekter findes som indstillinger. Billedwidgettens fane Style har en Hover-fane med Opacity, CSS-filtre og Hover Animation.

De indbyggede indstillinger dækkes trin for trin ind sådan tilføjes billedsvæveeffekter i Elementor. Den generelle teknik er dokumenteret på MDN's side for pseudoklassen :hover.

No-code ruten

CSS passer til simple effekter på selve billedet. Når du vil have en titel og en beskrivelse, der animerer over billedet, vokser CSS hurtigt, og du skal vedligeholde den ved hver designændring.

Image Hover Effects-widgetten i Master Addons erstatter den med en dropdown. Den har 30 effekter, en titel og beskrivelse for hvert billede og Style-fanekontroller for farver og type.

Se dem live. de Widget-side for billedhover-effekter har otte kort til at svæve og en tabel med alle 30 effekter.

Ofte stillede spørgsmål

Endelige tanker

CSS-billedhover-effekter i Elementor har brug for en klasse på Image-widgetten og en kort regel. De fem her dækker zoom, farve, løft, overlejring og en glidende billedtekst, og hver kan justeres ved at ændre en eller to værdier.

Når den ønskede effekt inkluderer tekst over billedet, skal widget til billedhover-effekter får dig derhen uden at opretholde CSS.

Relateret læsning

• Elementor animerede knapper
• Elementor rulleeffekter
• Sådan tilføjes GSAP-animation i Elementor
• Sådan zoomer eller ændrer du et billede på svæve i Elementor
• 30 billede hover effekter til Elementor