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 







        

          
          

		  
Tutto ciò di cui hai bisogno per diventare uno sviluppatore Pro WordPress
            
Il percorso per diventare uno sviluppatore esperto è lungo e praticamente infinito. Nuovi framework e tecnologie web tengono gli sviluppatori sempre pronti a spingere per saperne di più ogni anno. WordPress è probabilmente il CMS PHP più popolare mai realizzato e alimenta quasi il 20% di tutti i siti web ospitati da terzi.Se 
			
(Consigli tecnici e di design)
          
        
      

        

          
          

		  
8 scorciatoie di Excel per risparmiare tempo [Infografica]
            
Excel è sempre stato associato al lavoro d'ufficio e ai fogli di lavoro (e meno associato alla produzione di opere d'arte davvero eccezionale) che sono compiti lunghi, banali e ripetitivi che cerchiamo di fare, ma che non riesco mai a riuscire a evitare. Ecco perché i trucchi e le scorciatoie per risparmiare tempo sono ottimi hack e salvataggi che la maggior parte di noi minion di Excel ha fame.S
			
(Consigli tecnici e di design)