Hvordan zoome et bilde på mushverda ved hjelp av CSS

CSS “overgang”Eiendom brukes til å legge til effekter på de forskjellige HTML -elementene, for eksempel å endre bredde, høyde, størrelse og plassering av elementene. Ved å bruke denne egenskapen, kan du også zoome et bilde på mushverda med kombinasjonen av transformasjonseiendom og: sveve pseudoklasseelement.

Hensikten med denne artikkelen er å lære deg prosedyren for å zoome inn på et bilde på en mushiver. Så la oss starte!

Hvordan zoome et bilde på mushverda ved hjelp av CSS?

“overgang”Og“forvandle”Egenskaper til CSS brukes til å zoome et bilde på en mushiver. Før vi hopper inn i implementeringen, vil vi diskutere de nevnte egenskapene en etter en!

CSS “Overgang” -egenskap

“overgang”Eiendom brukes til å endre verdien av CSS -egenskaper som bredde, høyde, opacitet og transformasjon innen en bestemt periode. Det er en kortvarig eiendom av fire andre eiendommer.

Sjekk ut syntaksen til overgangsegenskapen.

Syntaks

Overgang: Overgangs-egenskap
Overgangstiming-funksjon Transition-forsinkelse

Beskrivelsen av egenskapene nevnt over er gitt nedenfor:

• Overgangseiendom: Den brukes til å sette overgangen til enhver CSS -egenskap, for eksempel bredde, høyde, opacitet, transformasjon og mange flere.

• Overgangs-varighet: Det brukes til å justere overgangens varighet.

• Overgangstiming-funksjon: Det brukes til å sette hastigheten på overgangen.

• Overgang-forsinkelse: Den spesifiserer når overgangen starter eller forsinkelser.

CSS “Transform” -egenskaper

For 2D- og 3D -transformasjon av HTML -elementer brukes "Transform" -egenskapen til CSS. Ved å bruke denne egenskapen, kan du endre formen og størrelsen på elementene. Det lar også et element rotere, skjev og skala.

Syntaks

Syntaksen til “forvandle”Eiendom er:

Transform: Ingen | Transform-funksjoner

Beskrivelsen av transformasjonsegenskapen er gitt nedenfor:

• ingen: Det brukes til å angi ingen transformasjon av elementene.

• Transform-funksjon: Det brukes til å angi funksjonen til transformasjonsegenskapen som roter (), skew (), translate () og skala (). Dessuten endrer skalaen () -funksjonen elementet i horisontale og vertikale retninger.

Eksempel 1: Zoom et bilde på musen sveve

For å zoome et bilde på en mushover, først, legg til et bilde i HTML, og bruk deretter sveveeffekten på det.

Trinn 1: Legg til bilde i div

For å zoome et bilde på mushverv ved å bruke CSS, først vil vi legge til et bilde i "div”. For å gjøre det, bruk taggen og angi kilden til bildet som "bilde.PNG ” inne i .

Html

Trinn 2: Style Div

I CSS vil vi bruke “div”For å få tilgang til diven vi opprettet i HTML, satte deretter høyden på div som“250px”Og bakgrunnsfargen som“RGB (134, 240, 227)”. Videre vil vi justere grensen rundt diven ved å sette bredden som “10px”, stil som “Ridge”, og farge som “RGB (2, 141, 127)”.

CSS

div
Høyde: 250px;
Bakgrunn: RGB (134, 240, 227);
Border: 10px Ridge RGB (2, 141, 127);

Trinn 3: Angi bildeposisjon og bruk "overgang" -egenskap

I neste trinn, sett posisjonen til bildet ved å bruke polstringen som “80px” og “160px”. Vi vil bruke bredden som "150px”For å justere størrelsen på bildet. Etter det, bruk overgangsegenskapen på bildet ved å sette verdien av overgangsegenskapen som "transformasjon" og overgangsvarighet som "0s”:

IMG
polstring: 80px 160px;
Bredde: 150px;
Overgang: Transform 0s;

Merk: Verdiene for polstringen er satt som “80px”Representerer polstringen fra topp og bunn, og“160px”Indikerer polstring fra venstre og høyre.

Trinn 4: Zoom et bilde ved hjelp av "transform" -egenskapen på svevet

Nå vil vi bruke “.IMG: Hopp”For å koble bildet med Hover Pseudoklasseelementet. Som et resultat vil svevet bli brukt på bildet. Neste, for å zoome et bilde på mushverdømmet, vil vi bruke transformasjonseiendommen og sette verdien av skalafunksjonen som "(1.9)”Å endre størrelse på bildet i både horisontale og vertikale retninger:

IMG: Hopp
Transform: skala (1.9);

Som du kan se at bildet er zoomet når musen over det:

La oss flytte til neste eksempel, der vi vil zoome en GIF på musen sveve.

Eksempel 2: Zoom A GIF på mushiver

Først vil vi legge til en GIF i HTML ved hjelp av taggen og spesifisere GIF -kilden som "Gif.gif”:

Vi vil style diven det samme som forrige eksempel. Sett etter det GIF -posisjonen ved å bruke polstringen som “50px”Og“200px”:

IMG
polstring: 50px 200px;
Bredde: 150px;
Overgang: Transform 0s;

Deretter vil vi bruke “IMG: Hopp”Og angi verdien av skalafunksjonen som“1.6”:

IMG: Hopp
Transform: skala (1.6);

Når du gjør det, vil GIF få zoom-inn når du mus over den:

Det er det! Vi har diskutert metoden for å zoome et bilde på mushiveren.

Konklusjon

Å zoome et bilde på en mushiver “Overgang” og “Transform” Egenskaper til CSS brukes. Først må du bruke overgangsegenskapen på bildet og angi verdien som transformasjon. Deretter i “:sveve”Pseudoklasseelement, bruk transformasjonseiendommen og angi verdien av skalaen () -funksjonen. I denne håndboken lærte vi metoden for å zoome et bilde på mushverda ved hjelp av CSS og gi eksempler på det.