Hoe maak je Pure CSS onClick Image Zoom Effect

CSS heeft geen pseudoclass voor het richten van klikgebeurtenissen, en dit vormt een van de grootste pijnpunten van front-end ontwikkelaars. De dichtstbijzijnde pseudo-klasse is :active die een element opmaakt voor de periode dat een gebruiker er met de muis op drukt.

Dit effect is echter van korte duur: zodra de gebruiker de muis loslaat, werkt :active niet meer. We moeten een andere manier vinden om de klikgebeurtenis in CSS te emuleren .

Dit bericht is geschreven als antwoord op het verzoek van een lezer en het zal uitleggen hoe je de klikgebeurtenis met pure CSS kunt targeten in een specifieke use-case, zoomafbeelding .

U kunt hieronder het eindresultaat zien: een oplossing die alleen CSS biedt voor het inzoomen van afbeeldingen op klikken .

Wanneer de CSS-only oplossing te gebruiken

Voordat ik verderga, wil ik wel zeggen dat ik voor de zoom van afbeeldingen de CSS-only-methode (die de afmetingen van de afbeelding wijzigt) alleen aanbeveelt als je een enkele of een groep van enkele afbeeldingen de zoomfunctie wilt laten gebruiken.

Voor een goede galerij biedt JavaScript meer flexibiliteit en efficiëntie.

Front-end technieken die we zullen gebruiken

Nu je bent gewaarschuwd, laten we snel kijken naar de 3 belangrijkste technieken die we zullen gebruiken:

1. De
2. Het kenmerk usemap van de tag, die de afbeelding aan de imagemap koppelt.
3. De :target CSS pseudo-klasse die een element vertegenwoordigt dat is getarget met behulp van de ID-selector.

1. Maak de HTML-basis

Laten we eerst de HTML-basis maken. In de onderstaande code voegen we een afbeelding toe om te zoomen en uit te vouwen en knoppictogrammen te sluiten om in en uit te zoomen.

Het is belangrijk om een ​​ID op de afbeelding te hebben waarop moet worden ingezoomd en de knop Sluiten moet een link zijn met het kenmerk href="#" . Ik zal later in de post uitleggen waarom.

2. Voeg de CSS toe

Aanvankelijk zou het pictogram Sluiten niet moeten worden weergegeven . De position, margin-, left en bottom plaatsen de pictogrammen Uitvouwen en Sluiten waar we ze willen hebben - in de rechterbovenhoek van de afbeelding.

De pointer-events: none; regel staat muisgebeurtenissen toe om door het pictogram Expand te gaan en de afbeelding te bereiken .

 .img {height: 150px; breedte: 200 px; } .close {background-image: url ("Close-icon.png"); achtergrondherhaling: geen herhaling; onderkant: 418 px; Geen weergeven; hoogte: 32 px; links: 462px; margin-top: -32px; positie: relatief; breedte: 32px; } .expand {bottom: 125px; marge links: -32 px; margin-right: 16px; pointer-events: geen; positie: relatief; } 

Op de imagemap moet het klikbare gebied zich in de rechterbovenhoek van de afbeelding rechts onder het pictogram Expand en over de grootte ervan bevinden. Plaats de

In het codeblok hierboven, de tag definieert de vorm, grootte en URI van een koppelbaar gebied binnen een afbeelding. Voor een rechthoekige vorm neemt het coords de rect waarde aan en geven de vier waarden van het coords attribuut de afstand in pixels weer tussen:

1. de linkerrand van de afbeelding en de linkerrand van het koppelingsgebied
2. de bovenrand van de afbeelding en de bovenrand van het koppelingsgebied
3. de linkerrand van de afbeelding en de rechterrand van het koppelingsgebied
4. de bovenrand van de afbeelding en de onderkant van het koppelingsgebied

De waarde van het href kenmerk moet de hash-ID van de afbeelding zijn (daarom moet de afbeelding een id ).

4. Bind de afbeelding aan de Image Map

Voeg het usemap attribuut toe aan de afbeelding om het aan de afbeelding te binden . De waarde moet de hash-weergave zijn van het name -kenmerk van de

 Hoe de knop Sluiten werkt 
Omdat de knop Sluiten als achtergrondafbeelding is toegevoegd (stap 2) en eigenlijk een tag is met het kenmerk href=# (stap 1), wordt erop geklikt nadat de fragment-id aan het einde van de URI is verwijderd. Daarom verwijdert het ook de :target pseudo-class uit de afbeelding en de afbeelding keert terug naar de vorige grootte .
Nu is het CSS-only zoom-on-click effect gedaan, bekijk de onderstaande demo, of lees een beetje meer over de theorie achter beeldkaarten in de volgende sectie.
 Achtergrondinformatie: waarom 
Inmiddels begrijp je zeker dat het belangrijkste voor deze CSS-only oplossing om te werken, is om de afbeelding te targeten met het href="#imgid" -attribuut, dat ook zou kunnen worden gedaan met de tag in plaats van de afbeelding.
Dit kan waar zijn, maar als het om afbeeldingen gaat, gebruik dan de 
De default voor vormattribuut creëert een rechthoekig koppelbaar gebied dat de hele afbeelding bedekt . Als u in plaats daarvan zou gebruiken, zou u het moeten coderen om de afbeelding te bedekken, en misschien moet u ook een wrapper-element gebruiken voor hetzelfde doel.
Om ook te spreken over de kanttekeningen van deze oplossing, wordt de CSS-eigenschap pointer-events (die we in stap 2 hebben gebruikt) pas vanaf versie 11 ondersteund door Internet Explorer.
Als u eerder IE-browsers wilt ondersteunen, kunt u deze in plaats van gebruiken 







        

          
          

		  
Flexbox-patronen: de ultieme CSS Flexbox-codebibliotheek
            
De nieuwste CSS flexbox-eigenschap heeft de manier waarop ontwikkelaars interfaces maken radicaal veranderd. Nooit meer zweven en CSS-hacks om lay-outs perfect uitgelijnd te krijgen. U hoeft zich geen zorgen meer te maken over aangepaste, responsieve technieken voor het verwerken van indelingen met meerdere kolommen
			
(Technische en ontwerptips)
          
        
      

        

          
          

		  
Schakel Extra verbindende monitors uit in een Click With Screen Commander
            
Mac: Multi-monitor setups zijn met name handig als je het type bent dat regelmatig multitaskt. Er zijn echter momenten waarop het gebruik van meerdere beeldschermen meer een afleiding kan zijn.Als u een Mac-gebruiker bent en graag een app wilt waarmee u de monitoren kunt verduisteren in uw opstelling met meerdere monitors, dan bent u wellicht geïnteresseerd in Screen Commander.
			
(Technische en ontwerptips)