Sådan opretter du en billedhovereffekt i CSS

Billedsvæveeffekter kan tilføje et ekstra niveau af polering til dit websted. De skaber en jævn effekt, hvilket gør billedgallerier eller karruseller mere behagelige at navigere i. Det bedste er, at du kan oprette disse effekter med kun CSS og uden JavaScript.

Du kan oprette forskellige stilarter af animation på dine billeder. Disse omfatter sløring eller zoom af baggrunden, falmning eller glidning i teksten og ændring af baggrundsfarven.

Oprettelse af HTML til billederne

Start med at oprette en index.html fil i en tom mappe på din computer, og åbn derefter filen med en teksteditor. Inde i filen skal du oprette HTML-skelettet og tilføje følgende markering inde i åbningsteksten og den afsluttende kropskode:

<divklasse="gitter">
<divklasse="image-indpakning">
<imgklasse="slør"src=" https://picsum.photos/500?random=1"alt="">
<divklasse="indhold falmer">





instagram viewer

 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta annonce
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>

<divklasse="image-indpakning">
<imgklasse="zoom sløring"src=" https://picsum.photos/500?random=2"alt="">
<divklasse="indhold falmer">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta annonce
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
<divklasse="image-indpakning">
<imgklasse="slør"src=" https://picsum.photos/500?random=3"alt="">
<divklasse="indhold slide-venstre">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta annonce
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
<divklasse="image-indpakning">
<imgklasse="grå"src=" https://picsum.photos/500?random=3"alt="">
<divklasse="indhold slide-venstre">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta annonce
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
div>

Dette er en gitterbeholder med fire billedindpakninger. div-elementerne med billedindpakning klasse tjene som indpakning for billedet og dets tilhørende tekst. Hver sektions billede og indhold er tilføjet et unikt sæt klasser.

Inde i typografiarket vil du målrette disse elementer ved deres klassenavne og anvende de forskellige styling- og animationseffekter. Teksten vises ikke som standard; du vil kun vise det, når du holder markøren over billedindpakningen, og billedet vil undergå forskellige effekter i processen.

Tilføjelse af grundlæggende CSS

Nu hvor du har oprettet HTML, er det tid til at style det med CSS. Lave en style.css fil og link til dette typografiark fra din HTML-fil, inde i afsnit:

<linkrel="stylesheet"href="style.css">

Inde i din style.css fil, den første ting du skal gøre er at nulstille margenen på kroppen til nul og indstille en bundmargen:

legeme {
margen: 0;
margin-bund: 20rem;
}

Dernæst skal du forvandle den yderste beholder til en CSS-gitter, som du kan bruge til at lægge elementer ud i to dimensioner. Følgende kode opretter et gitter med så mange kolonner eller rækker, der passer. Minimumsstørrelsen for hver kolonne er 300px, og den maksimale størrelse er 1 brøkdel af beholderen:

.gitter {
Skærm: gitter;
gitter-skabelon-kolonner: gentage(auto-tilpasning, minmax(300px, 1fr));
}

Da du vil placere teksten i forhold til dens beholder, skal du indstille positionen i forhold til billedindpakningen:

.image-indpakning {
position: i forhold;
flyde over: skjult;
}

Næste trin er at style billedet. Vis billedet som et blokelement, lad det spænde over hele beholderens bredde, og placer det monteret i midten af ​​beholderen:

.image-indpakning > img {
Skærm: blok;
bredde: 100%;
aspekt-forhold: 1 / 1;
objekttilpasning: dække over;
objekt-position: centrum;
}

Med hensyn til teksten skal du placere den centralt og give en gennemsigtig, lysegrå baggrundsfarve:

.image-indpakning > .indhold {
position: absolut;
indsat: 0;
skriftstørrelse: 2rem;
polstring: 1rem;
baggrund: rgba(255, 255, 255, .4);
Skærm: bøje;
align-elementer: centrum;
retfærdiggøre-indhold: centrum;
}

Gem CSS-filen og åbn index.html i din browser. Du bør finde en side, der ligner den på billedet nedenfor.

Indstilling af overgangen på billeder og tekster

Nu hvor du har anvendt de grundlæggende stilarter på billederne, er næste trin at tilføje noget animation til dem. Start med at tilføje en overgang til begge billeder og deres tilhørende tekst:

.image-indpakning > img,
.image-indpakning > .indhold {
overgang: 200Frklet ind-ud;
}

Det betyder, at alle overgangseffekterne (dvs. fade-in, zoom og sløring) vil vare 200 millisekunder og have den samme timingkurve.

Fade-in og sløringsanimation

Den første animationsstil falmer i teksten. Når du holder markøren over en bestemt billedindpakning, vil indholdet, der har falme klasse vil have denne effekt (fade-in og fade-out animation) anvendt på den. Du opnår dette ved at indstille opaciteten til nul og ændre den til én, når en mus svæver på en bestemt billedindpakning:

.image-indpakning > .indhold.falme {
Gennemsigtighed: 0;
}
.image-indpakning:hover > .indhold.falme {
Gennemsigtighed: 1;
}

Hvis du gemmer filen og tjekker din browser, vil du se den indtonede animation i kraft. Men du vil måske også bemærke, at teksten er lidt svær at læse (hvis billedet er skarpt og har meget kontrast). Husk, at alle billederne også har et klassenavn sløring. Dette er for at sløre billederne for at tilføje en tiltrængt kontrast mellem dem og teksten:

billedindpakning:hover > img.slør {
filter: sløring(5px)
}

Når du nu holder musemarkøren over billedet, kan du se, at det bare bliver sløret. Du kan øge pixelværdien for at gøre sløringen mere udtalt på billederne og derved tilføje mere kontrast mellem den og teksten.

Tilføjelse af andre effekter

De andre effekter er at glide teksten fra venstre, zoome billedet og tilføje gråtoner til billedet. Her er koden til at opnå alle tre effekter:

.image-indpakning > .indhold.slide-venstre {
transformere: translateX(100%)
}
.image-indpakning:hover > .indhold.slide-venstre {
transformere: translateX(0%)
}
.image-indpakning:hover > img.grå {
filter: gråtoner(1)
}
.image-indpakning:hover > img.slør {
filter: sløring(5px)
}
.image-indpakning:hover > img.zoom {
transformere: vægt(1.1)
}

Gem filen, gå derefter til din browser og hold musemarkøren over hvert billede. Du bør se de forskellige effekter i aktion.

For at fuldende slide-in-effekterne kan du oprette yderligere tre billedindpakninger, der hver indeholder et billede og tekst. Hvert stykke tekst ville have klassenavnet glide op, glide ned, eller let-højre. Så sender du den rigtige værdi ind pixel, em eller rem, inde i transform() funktion til at skabe alle tre effekter.

CSS Grid og Flexbox

CSS Grid og Flexbox er to funktioner, der giver dig mulighed for at skabe fantastiske layouts til din hjemmeside. Du kan nemt oprette stort set ethvert layout, du ønsker, og tilpasse rækkerne og kolonnerne til din smag. Kolonnerne vil også være responsive som standard. At lære, hvornår du skal bruge den ene frem for den anden, vil hjælpe dig med at blive en CSS-udvikler på én procent.