Hvordan lage et bildeoverleggseffekt på svevet?

Å sette inn vanlige bilder på websidene dine er en måte å forbedre utseendet sitt, men å legge til forskjellige effekter til bilder kan videre forskjønne websider og kan skape en fantastisk brukeropplevelse. En interessant kategori av effekter som du kan legge til bilder er overleggseffektene. Disse effektene er plassert på toppen av bilder og brukes sammen med en sveveeffekt. Derfor vises de bare når brukeren bringer musen til bildet.

Hvilke typer effekter som er omtalt i dette innlegget er.

1. Falme
2. Skyv toppen
3. Skyv bunnen
4. Skyv til venstre
5. Skyv til høyre

La oss lære å implementere disse ved hjelp av eksempler.

La oss først sette inn et bilde på vår webside:

Html

I koden ovenfor har vi opprettet to DIV -containere. First Div Container med klassen “Div” holder bildet så vel som en annen div -container som vil holde bildeoverleggseffekten som dukker opp når brukeren henger over bildet.

Produksjon

Et bilde er satt inn vellykket på websiden.

Nå som vi har tatt med bildet, vil vi lære å legge til de forskjellige bildeoverleggseffektene som er angitt i begynnelsen av artikkelen.

Fade Overlay Effect

For å legge til en fadeoverleggseffekt på bildet, følg koden nedenfor.

CSS

.bilde
Bredde: 250px;
Høyde: 250px;

.div
Posisjon: relativ;
Bredde: 450px;

.overlay
Posisjon: Absolutt;
Overgang: alle 0.4s letthet;
Opacitet: 0;

.Div: Hold .overlay
Opacitet: 0.8;

.Fadeeffect
Høyde: 250px;
Bredde: 250px;
Topp: 0;
Venstre: 100px;
bakgrunnsfarge: Whitesmoke;

Først av alt setter vi litt bredde og høyde på bildet og justerer plasseringen av den første div -beholderen som relativ, slik at vi absolutt kan plassere den andre div -beholderen som inneholder overleggseffekten.

Etter å ha plassert de to DIV -containerne, bruker vi overgangen Shorthand -egenskapen for å gi en overgangseffekt til alle elementer i en varighet på 0.4 sekunder på en "letthet" måte. I mellomtiden er opaciteten før sveveeffekten blitt satt til 0, mens brukeren henger opaciteten til overleggseffekten er satt til 0.8.

Til slutt gir vi litt bredde og høyde til Fade Overlay -effekten. Bildebredden og høyden før og etter påføring av overlegget må være den samme slik at effekten blir plassert nøyaktig på toppen av bildet. Vi har også brukt topp- og venstre egenskaper for å plassere effekten nøyaktig på toppen av bildet og tildelt det en hvit røykfarge.

Produksjon

En falming av overlegg ble implementert med suksess.

Skyv topp overleggseffekt

Tenk på koden nedenfor for å forstå hvordan du legger til en lysbilde -overleggseffekt på et bilde.

CSS

.bilde
Bredde: 250px;
Høyde: 250px;

.div
Posisjon: relativ;
Bredde: 450px;

.overlay
Posisjon: Absolutt;
Overgang: alle 0.4s letthet;
Opacitet: 0;

.Div: Hold .overlay
Opacitet: 0.8;

.Slidetopeffect
Bredde: 250px;
Høyde: 0;
Topp: 0;
Til høyre: 100px;
bakgrunnsfarge: Whitesmoke;

.Div: Hold .Slidetopeffect
Høyde: 250px;

Stilen og plasseringen av DIV -beholderne og bildet er de samme til justeringen av opaciteten til svevetffekten.

For å legge til en lysbilde -overleggseffekt til bildet har vi satt bredden på overleggseffekten den samme som bredden på bildet og for å plassere det på toppen av bildet, har vi brukt topp- og høyre egenskaper. For å skyve effekten fra toppen, har vi dessuten justert høyden på overleggseffekten til null før svevetffekten. Imidlertid, når brukeren bringer musen over bildet, vil høyden på effekten være den samme som bildet.

Produksjon

En lysbilde -overleggseffekt skapt med stor letthet.

Lysbildebunnoverleggseffekt

Nedenfor har vi gitt deg koden som vi vil legge til en lysbilde -overleggseffekt på bildet.

CSS

.bilde
Bredde: 250px;
Høyde: 250px;

.div
Posisjon: relativ;
Bredde: 450px;

.overlay
Posisjon: Absolutt;
Overgang: alle 0.4s letthet;
Opacitet: 0;

.Div: Hold .overlay
Opacitet: 0.8;

.SlideBottomeffect
Høyde: 0;
Bredde: 250px;
Bunn: 3px;
Venstre: 100px;
bakgrunnsfarge: Whitesmoke;

.Div: Hold .SlideBottomeffect
Høyde: 300px;

Resten av koden er den samme som brukt i eksemplet ovenfor, men for å plassere effekten på toppen av bildet har vi brukt bunn- og høyre egenskaper og for å skyve effekten fra bunnen vi tildeler samme høyde til effekten Som det av bildet på svevet.

Produksjon

Slide bunnoverleggseffekten ble lagt til.

Lysbilde til venstre overlegg

Kontakt koden nedenfor for å legge til en lysbilde til venstre overlayeffekt på bildet.

CSS

.bilde
Bredde: 250px;
Høyde: 250px;

.div
Posisjon: relativ;
Bredde: 450px;

.overlay
Posisjon: Absolutt;
Overgang: alle 0.4s letthet;
Opacitet: 0;

.Div: Hold .overlay
Opacitet: 0.8;

.Slidelyftffect
Høyde: 250px;
Bredde: 0;
Topp: 0;
Venstre: 100px;
bakgrunnsfarge: Whitesmoke;

.Div: Hold .Slidelyftffect
Bredde: 250px;

For å legge til en lysbilde til venstre overlegg på bildet har vi satt høyden til 250px som er den samme som høyden på bildet og bredden til 0px før svevetffekten. I mellomtiden, for å plassere effekten riktig på bildet, har vi brukt topp- og venstre egenskaper. Og til slutt, etter svevetffekten, er bredden satt til 250px som er den samme som bredden på bildet.

Produksjon

Slide -venstre virkning fungerer som den skal.

Skyv høyre overleggseffekt

Den siste overleggseffekten som vi kommer til å demonstrere er lysbildet høyre overleggseffekt. Følg koden nedenfor.

CSS

.bilde
Bredde: 250px;
Høyde: 250px;

.div
Posisjon: relativ;
Bredde: 450px;

.overlay
Posisjon: Absolutt;
Overgang: alle 0.4s letthet;
Opacitet: 0;

.Div: Hold .overlay
Opacitet: 0.8;

.Sliderlighteffect
Høyde: 250px;
Bredde: 0;
Topp: 0;
Til høyre: 100px;
bakgrunnsfarge: Whitesmoke;

.Div: Hold .Sliderlighteffect
Bredde: 250px;

For å skape en lysbilde høyre overleggseffekt på bildet har vi tildelt noen verdier til toppen, og høyre egenskap. Imidlertid, når du legger til svevetffekten, er bredden blitt justert til 250px som ligner på bildet.

Produksjon

En lysbilde høyre overleggseffekt ble med hell lagt til bildet.

Konklusjon

For å legge til overleggseffekter til bilder må du plassere dem i en DIV -beholder og bruke forskjellige CSS -egenskaper for å legge til overleggseffekter på dem. Å legge til disse effekten til bilder kan være en interessant måte å forbedre skjønnheten i websidene. Det er flere overleggseffekter som du kan legge til bildene dine som, falmer, skyv topp, skyv til venstre og skyve til høyre. Disse effektene kan legges til ved hjelp av forskjellige CSS -egenskaper. Denne oppskrivningen demonstrerer hvordan du kan legge til forskjellige bildeoverleggseffekter på svevet ved hjelp av relevante eksempler.