Come creare Pure CSS onClick Image Zoom Effect

I CSS non hanno uno pseudoclass per il targeting degli eventi click e questo costituisce uno dei maggiori punti deboli degli sviluppatori front-end. La pseudo-classe più vicina è :active che disegna un elemento per il periodo di tempo in cui un utente preme il mouse su di esso.

Questo effetto è tuttavia di breve durata: quando l'utente rilascia il mouse, : :active non funziona più. Dobbiamo trovare un altro modo per emulare l'evento click in CSS .

Questo post è stato scritto in risposta a una richiesta del lettore e spiegherà come indirizzare l'evento click con puro CSS in un caso d'uso specifico, lo zoom dell'immagine .

Puoi vedere il risultato finale di seguito: una soluzione solo CSS per lo zoom dell'immagine al clic .

Quando utilizzare la soluzione solo CSS

Prima di procedere, voglio dire, che per lo zoom dell'immagine raccomando il metodo solo CSS (che modifica le dimensioni dell'immagine), solo quando si desidera che un singolo o un gruppo di poche immagini abbiano la funzione di zoom.

Per una galleria corretta, JavaScript offre maggiore flessibilità ed efficienza.

Tecniche di front-end che useremo

Ora che sei stato avvertito, esaminiamo rapidamente le 3 tecniche chiave che utilizzeremo:

1. Il
2. L' attributo usemap del tag, che collega l'immagine alla mappa immagine.
3. La pseudo-classe CSS :target che rappresenta un elemento che è stato scelto come target utilizzando il suo selettore ID.

1. Creare la base HTML

Per prima cosa, creiamo la base HTML. Nel codice qui sotto, aggiungiamo un'immagine da ingrandire e espandere e chiudi le icone dei pulsanti per ingrandire e rimpicciolire.

È importante avere un ID sull'immagine da ingrandire, e il pulsante Chiudi deve essere un collegamento che ha l'attributo href="#", spiegherò perché più avanti nel post.

2. Aggiungi il CSS

Inizialmente, l'icona Chiudi non dovrebbe essere visualizzata . Le proprietà position, margin-, left e bottom posizionano le icone Espandi e Chiudi dove vogliamo che siano - nell'angolo in alto a destra dell'immagine.

Gli pointer-events: none; regola consente agli eventi del mouse di passare attraverso l'icona Espandi e raggiungere l'immagine .

 .img {height: 150px; larghezza: 200 px; } .close {background-image: url ("Close-icon.png"); background-repeat: no-repeat; fondo: 418 px; display: nessuno; altezza: 32px; a sinistra: 462 px; margin-top: -32px; posizione: relativa; larghezza: 32 px; } .expand {bottom: 125px; margin-left: -32px; margin-right: 16px; pointer-events: none; posizione: relativa; } 

Sulla mappa immagine, l' area cliccabile dovrebbe trovarsi nell'angolo in alto a destra dell'immagine proprio sotto l'icona Espandi, e circa le sue dimensioni. Posiziona il

Nel blocco di codice sopra, il tag definisce la forma, la dimensione e l'URI di un'area linkabile all'interno di una mappa immagine. Per una forma rettangolare, l'attributo shape prende il valore rect ei quattro valori dell'attributo coords rappresentano la distanza in pixel tra:

1. il bordo sinistro dell'immagine e il bordo sinistro dell'area di collegamento
2. il bordo superiore dell'immagine e il bordo superiore dell'area di collegamento
3. il bordo sinistro dell'immagine e il bordo destro dell'area di collegamento
4. il bordo superiore dell'immagine e il bordo inferiore dell'area di collegamento

Il valore dell'attributo href deve essere l' identificatore di hash dell'immagine (ecco perché l'immagine dovrebbe avere un id ).

4. Associare l'immagine alla mappa immagine

Aggiungi l'attributo usemap all'immagine in modo da associarlo alla mappa immagine . Il suo valore deve essere la rappresentazione hash dell'attributo name di

 Come funziona il pulsante Chiudi 
Poiché il pulsante Chiudi è stato aggiunto come immagine di sfondo (passaggio 2) ed è in realtà un tag con l'attributo href=# (Passaggio 1), quando viene fatto clic, rimuove l'identificatore di frammento dalla fine dell'URI. Quindi rimuove anche :target pseudo-classe :target dall'immagine e l'immagine ritorna alle dimensioni precedenti .
Ora l'effetto zoom-su-clic del solo CSS è fatto, controlla la demo qui sotto, o leggi un po 'di più sulla teoria che sta dietro le mappe delle immagini nella prossima sezione.
 Informazioni di base: perché 
Ormai, sicuramente comprendi che la cosa più importante per questa soluzione solo CSS è quella di indirizzare l'immagine usando l' attributo href="#imgid", che potrebbe anche essere fatto usando il tag al posto della mappa immagine.
Questo può essere vero, comunque quando si tratta di immagini, usando il 
Il valore default per l'attributo shape crea un'area rettangolare collegabile che copre l'intera immagine . Se invece dovessi usarlo, dovresti codificarlo per coprire l'immagine, e potresti anche dover usare un elemento wrapper per lo stesso scopo.
Per parlare anche degli avvertimenti di questa soluzione, la proprietà CSS degli pointer-events (utilizzata nel passaggio 2) è supportata da Internet Explorer solo dalla versione 11 .
Per supportare i browser IE prima, è possibile che si desideri utilizzare al posto di 







        

          
          

		  
Perché dovresti evitare di essere oberati di lavoro a 25 [Op-Ed]
            
A giudicare da tutti quei post che hai letto sui social media, sono un millenario o, in altre parole, sono tra i 18 ei 34 anni quando questo post è stato scritto. Ho scritto un post su essere 25 e sovraccarico di lavoro, brandendo un consiglio che ritengo possa giovare ai compagni millennial che potrebbero essere in viaggio verso dove sono ora.
			
(Consigli tecnici e di design)
          
        
      

        

          
          

		  
10 pacchetti Atom più utili per sviluppatori Web
            
Hai provato Atom? Anche se è abbastanza nuovo, molti si sono innamorati di Atom, un editor di testo realizzato da GitHub che offre molti vantaggi e soprattutto è gratuito per l'uso. Atom viene fornito con alcuni pacchetti integrati, come l'integrazione con Git e la visualizzazione ad albero. 
			
(Consigli tecnici e di design)