Hoe maak je Pure CSS onClick Image Zoom Effect

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

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

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

U kunt het eindresultaat hieronder bekijken - een oplossing met alleen CSS voor afbeelding zoom in klik.

Wanneer de CSS-only oplossing gebruiken

Voordat ik verder ga, wil ik wel zeggen dat ik voor het vergroten van de zoom de CSS-only-methode (die de afmetingen van de afbeelding verandert) alleen aanbeveelt als je een single of a groep van enkele afbeeldingen om de zoomfunctie te hebben.

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

Front-end technieken die we zullen gebruiken

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

1. De HTML-tag waarmee browsers kunnen maak koppelbare gebieden over een afbeelding. Lees meer op de element in mijn eerdere bericht.
2. De usemap attribuut van de label, die de afbeelding aan de beeldkaart koppelt.
3. De :doelwit CSS pseudo-klasse dat staat voor een element dat is getarget met zijn ID-selector.

1. Maak de HTML-basis

Laten we eerst de HTML-basis maken. In de onderstaande code voegen we toe een afbeelding om in te zoomen en uit te vouwen & knoppictogrammen 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 koppeling zijn met de href = "#" attribuut, ik zal later in de post uitleggen waarom.

2. Voeg de CSS toe

Aanvankelijk het pictogram Sluiten zou niet moeten worden weergegeven. De positie, marge-, links, en bodem eigenschappen plaats de Pictogrammen uitvouwen en sluiten waar we willen dat ze zijn - in de rechterbovenhoek van het beeld.

De pointer-events: geen; regel staat muisgebeurtenissen toe aan passeer het pictogram Expand en bereik de afbeelding.

 .img height: 150px; breedte: 200 px;  .close background-image: url ("Close-icon.png"); achtergrondherhaling: geen herhaling; onderaan: 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;  

3. Voeg de Image Map toe

Op de imagemap, de klikbaar gebied zou moeten zijn in de rechterbovenhoek van de afbeelding direct onder het pictogram Uitvouwen en over de grootte ervan. Plaats de element vóór de eerste tag in de HTML. We binden de afbeelding in de volgende stap aan de kaart.

In het codeblok hierboven, de tag definieert de vorm, grootte en URI van een koppelbaar gebied in een afbeelding. Voor een rechthoekige vorm, de vorm attribuut neemt de rect waarde, en de vier waarden van de coords attribuut geeft 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 & de onderkant van het koppelingsgebied

De waarde van de href attribuut moet de hash-ID van de afbeelding (dit is de reden waarom de afbeelding een ID kaart).

4. Bind de afbeelding aan de Image Map

Voeg de usemap attribuut aan de afbeelding om bind het aan de afbeelding map. De waarde ervan moet de hash representatie van de naam attribuut van de label we hebben toegevoegd in stap 3.

Het klikbare gebied van de imagemap nu ligt achter de knop Uitvouwen. Wanneer de gebruiker op de knop Uitvouwen klikt, wordt het klikbare gebied in werkelijkheid aangeklikt. Vergeet niet dat we de knop Uitvouwen hebben gemaakt “begaanbaar” met de pointer-events: geen; regel in stap 2.

Op deze manier de gebruiker richt zich op de afbeelding zelf door erop te klikken, en na de klik krijgt de URI een suffix met de "# Img1" fragment-ID.

5. Style de :doelwit Pseudo-Klasse

Tot de "# Img1" fragment-ID staat aan het einde van URI, de doelafbeelding kan zijn gestyled met de :doelwit pseudo-class

De afmetingen van het doelbeeld nemen toe, de knop Sluiten wordt weergegeven en de knop Uitvouwen wordt verborgen.

 .img: target height: 450px; breedte: 500 px;  .img: target + .close display: block;  .img: target + .close + .expand display: none;  

Hoe de knop Sluiten werkt

Omdat de knop Sluiten als achtergrondafbeelding is toegevoegd (stap 2) en eigenlijk een tag met de href = # kenmerk (stap 1), wanneer erop wordt geklikt, wordt de fragment-ID verwijderd aan het einde van de URI. Daarom ook verwijdert de :doelwit pseudo-class van de afbeelding en de afbeelding gaat terug naar de vorige grootte.

Achtergrondinformatie: waarom en niet ?

Inmiddels begrijp je zeker dat het belangrijkste voor deze CSS-only oplossing om te werken is om te werken richt de afbeelding met behulp van de href = "# imgid" attribuut, wat ook zou kunnen worden gedaan met behulp van de tag in plaats van de imagemap.

De standaard waarde voor vorm attribuut maakt een rechthoekig koppelbaar gebied dat het hele beeld bestrijkt. Als je zou gebruiken in plaats daarvan zou je het moeten coderen om de afbeelding te dekken, en misschien moet je ook een wrapper-element gebruiken voor hetzelfde doel.

Om eerder IE-browsers te ondersteunen, wilt u misschien wel gebruiken in plaats van , of laat de afbeelding inzoomen door ergens op te klikken (in dit geval is het pictogram Uitbreiden niet nodig).