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:
- Il
- L' attributo
usemap
del
tag, che collega l'immagine alla mappa immagine. - 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
tag nell'HTML. Legheremo l'immagine alla mappa nel prossimo passaggio.
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:
- il bordo sinistro dell'immagine e il bordo sinistro dell'area di collegamento
- il bordo superiore dell'immagine e il bordo superiore dell'area di collegamento
- il bordo sinistro dell'immagine e il bordo destro dell'area di collegamento
- 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é
e non? 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
l'elemento è più appropriato. È ancora più importante quando vuoi che lo zoom avvenga facendo clic su un'area più grande sull'immagine anziché solo sull'icona Espandi, ti dà una soluzione facile. Il valore
default
per l'attributoshape
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
oppure ingrandisci l'immagine facendo clic in qualsiasi punto (in questo caso non sarà necessario per l'icona Espandi). ![]()
Le basi del CSS orientato agli oggetti (OOCSS)
Lo sviluppo del frontend si muove rapidamente con molte nuove tecniche aggiunte ogni anno. Può essere una lotta per gli sviluppatori tenere il passo con tutto. Tra Sass e PostCSS è facile perdersi nel mare degli strumenti di sviluppo.Una tecnica più recente è il CSS orientato agli oggetti, chiamato anche OOCSS. Qu
![]()
Fotografia mobile: 20 gadget per scattare foto migliori
La fotografia non è più limitata ai membri del settore o ai professionisti che si guadagnano da vivere catturando i bei ricordi degli altri. Fare selfie e foto da condividere sui social media è praticamente parte della vita ora. Ciò ha creato un mercato per gli strumenti selfie, i gadget fotografici e gli accessori per smartphone che sono innovativi per l'utilizzo con i dispositivi mobiliIn questa raccolta di 20 gadget fotografici e accessori che puoi ottenere per il tuo smartphone, troverai oggetti come bastoni selfie, lenti attaccabili, supporti, fonte di luce e altro. an