Sådan opretter du ren CSS onClick Image Zoom Effect

CSS har ikke en pseudoklasse til målretning af klikhændelser, og dette udgør en af ​​de største smertepunkter af front-end udviklere. Den nærmeste pseudoklasse er :aktiv som stilarter et element for den tid, en bruger trykker deres mus over det.

Denne effekt er dog kortvarig: når brugeren frigiver musen, :aktiv virker ikke mere. Vi skal finde en anden vej til efterligne klikhændelsen i CSS.

Dette indlæg er skrevet som svar på en læsers anmodning, og det vil forklare, hvordan man skal mål klikhændelsen med ren CSS i en bestemt brugstilfælde, billedzoom.

Du kan se det endelige resultat nedenfor - en CSS-only-løsning til billedzoom på klik.

Hvornår skal du bruge CSS-Only Solution

Før jeg går videre, vil jeg sige, at for billedzoom anbefaler jeg CSS-only-metoden (som ændrer billedets dimensioner), kun når du vil have en enkelt eller a gruppe af få billeder at have zoom-funktionen.

For a passende galleri giver JavaScript mere fleksibilitet og effektivitet.

Front-End Teknikker Vi vil bruge

Nu hvor du er blevet advaret, lad os hurtigt se over 3 nøgle teknikker vi bruger

1. Det HTML-tag der tillader browsere at Opret linkbare områder over et billede. Læs mere på element i mit tidligere indlæg.
2. Det USEMAP attributten til tag, der hakker billedet til billedkortet.
3. Det :mål CSS pseudoklasse der repræsenterer et element, der er blevet målrettet ved hjælp af dens ID-vælger.

1. Opret HTML Base

Lad os først oprette HTML-basen. I koden nedenfor tilføjer vi et billede, der skal zoomes og udvides & Luk knap ikoner for at zoome ind og ud.

Det er vigtigt at have et ID på billedet, der skal zoomes, og Luk knappen skal være et link, der har href = "#" attribut, jeg forklarer hvorfor senere i posten.

2. Tilføj CSS

I begyndelsen er ikonet Luk skal ikke vises. Det position, margen-, venstre, og bund ejendomme placere det Udvid og Luk ikoner hvor vi vil have dem - i øverste højre hjørne af billedet.

Det peger-begivenheder: ingen; regel tillader mus begivenheder til gå gennem ikonet Udvid og nå billedet.

 .img højde: 150px; bredde: 200px;  .close background-image: url ("Close-icon.png"); background-repeat: no-repeat; bunden: 418px; display: none; højde: 32px; venstre: 462px; margin-top: -32px; stilling: relativ; bredde: 32px;  .expand bund: 125px; margen-venstre: -32px; margin-højre: 16px; peger-begivenheder: ingen; stilling: relativ;  

3. Tilføj billedkortet

På billedkortet, den klikbart område burde være i øverste højre hjørne af billedet lige under ikonet Expand, og om dets størrelse. Placer element før den første tag i HTML'en. Vi binder billedet til kortet i næste trin.

I kodeblokken ovenfor er tag definerer form, størrelse og URI for et forbindelsesområde inde i et billedkort. For a rektangulær form, det form attributten tager rect værdi og fire værdier af COORDS attribut repræsenterer afstanden i pixels mellem:

1. venstre kant af billedet og venstre kant af linkområdet
2. øverste kant af billedet og øverste kant af linkområdet
3. venstre kant af billedet og højre kant af linkområdet
4. øverste kant af billedet og bundkanten af ​​linkområdet

Værdien af href attribut skal være hash-identifikator for billedet (derfor skal billedet have en id).

4. Bind billedet til billedkortet

Tilføj USEMAP attribut til billedet for at binde det til billedkortet. Dens værdi skal være hash repræsentation af navn attributten til tag vi tilføjede i trin 3.

Det klikbare område på billedkortet nu ligger bag knappen Expand. Når brugeren klikker på knappen Udvid, er det det klikbare område, der klikkes i virkeligheden - husk at vi lavede knappen Expand “acceptabel” med peger-begivenheder: ingen; regel i trin 2.

På denne måde brugeren mål selve billedet ved at klikke på det, og efter kliket bliver URI suffixet med "# Img1" fragmentidentifikator.

5. stil den :mål Pseudo-klasse

Indtil "# Img1" Fragmentidentifikator er i slutningen af ​​URI, det målrettede billede kan være stylet med :mål pseudo-klasse

Målene for den målrettede billedforøgelse, knappen Luk vises, og knappen Expand bliver skjult.

 .img: mål højde: 450px; bredde: 500px;  .img: target + .close display: block;  .img: target + .close + .expand display: none;  

Hvordan den lukkede knap virker

Som Luk-knappen blev tilføjet som et baggrundsbillede (Trin 2), og er faktisk en tag med href = # attribut (Trin 1), når den klikkes, fjerner den fragmentidentifikatoren fra slutningen af ​​URI. Derfor er det også fjerner :mål pseudo-klasse fra billedet og billedet går tilbage til sin tidligere størrelse.

Baggrundsinformation: Hvorfor og ikke ?

Ved nu forstår du helt sikkert, at det vigtigste for denne CSS-only-løsning til arbejde er at målrette billedet ved hjælp af href = "# imgid" attribut, hvilket også kunne gøres ved hjælp af tag i stedet for billedkortet.

Det Standard værdi for form attribut skaber a rektangulært bindbart område, der dækker hele billedet. Hvis du skulle bruge i stedet skal du kode det for at dække billedet, og du skal muligvis også bruge et indpakningselement til samme formål.

For at understøtte IE browsere før det, kan du også bruge i stedet for , eller få billedet zoomet på ved at klikke hvor som helst på det (i dette tilfælde er der ikke behov for ikonet Expand).