Come creare Pure CSS onClick Image Zoom Effect

CSS non ha uno pseudoclass per targeting degli eventi click, e questo costituisce uno dei più grandi punti dolenti di sviluppatori front-end. La pseudo-classe più vicina è :attivo quale stile un elemento per il periodo di tempo in cui un utente preme il mouse su di esso.

Questo effetto è tuttavia di breve durata: una volta che l'utente ha rilasciato il mouse, :attivo non funziona più. Dobbiamo trovare un altro modo per emulare l'evento click in CSS.

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

Puoi vedere il risultato finale di seguito - una soluzione solo CSS per 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 un singolo o a gruppo di poche immagini per avere la funzione di zoom.

Per un corretto galleria, JavaScript offre più flessibilità ed efficienza.

Tecniche front-end che useremo

Ora che sei stato avvertito, esaminiamo rapidamente il 3 tecniche chiave useremo:

1. Il Tag HTML che consente ai browser di crea aree collegabili su un'immagine. Maggiori informazioni su elemento nel mio post precedente.
2. Il usemap attributo del etichetta, che collega l'immagine alla mappa immagine.
3. Il :bersaglio Pseudo-classe CSS che rappresenta un elemento che è stato bersagliato usando 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 ingrandire & 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 il href = "#" attributo, ti spiegherò perché più avanti nel post.

2. Aggiungi il CSS

Inizialmente, l'icona Chiudi non dovrebbe essere visualizzato. Il posizione, margine-, sinistra, e parte inferiore proprietà posto il Espandi e chiudi le icone dove vogliamo che siano - nell'angolo in alto a destra dell'immagine.

Il 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;  

3. Aggiungi la mappa immagine

Sulla mappa immagine, il area cliccabile dovrebbe essere nell'angolo in alto a destra dell'immagine appena sotto l'icona Espandi e le sue dimensioni. Posiziona il elemento prima del primo tag nell'HTML. Legheremo l'immagine alla mappa nel prossimo passaggio.

Nel blocco di codice sopra, il tag definisce il forma, dimensione e URI di un'area linkabile all'interno di una mappa immagine. Per un forma rettangolare, il forma l'attributo prende il rect valore, e il quattro valori del coords l'attributo rappresenta 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 del href l'attributo deve essere il identificatore di hash dell'immagine (questo è il motivo per cui l'immagine dovrebbe avere un id).

4. Associare l'immagine alla mappa immagine

Aggiungi il usemap attribuire all'immagine in modo tale da legalo alla mappa immagine. Il suo valore deve essere il rappresentazione hash del nome attributo del etichetta abbiamo aggiunto nel passaggio 3.

L'area cliccabile della mappa immagine ora si trova dietro il pulsante Espandi. Quando l'utente fa clic sul pulsante Espandi, è l'area cliccabile su cui viene fatto clic in realtà: ricorda che abbiamo creato il pulsante Espandi “accettabile” con il pointer-events: none; regola nel passaggio 2.

In questo modo l'utente bersaglia l'immagine stessa facendo clic su di esso, e dopo il clic l'URI viene contrassegnato con il suffisso "# Img1" identificatore di frammento.

5. Stile il :bersaglio Pseudo-Class

Fino al "# Img1" l'identificatore di frammento è alla fine dell'URI, l'immagine targetted può essere in stile con il :bersaglio pseudo-classe

Aumentano le dimensioni dell'immagine mirata, viene visualizzato il pulsante Chiudi e il pulsante Espandi viene nascosto.

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

Come funziona il pulsante Chiudi

Come il pulsante Chiudi è stato aggiunto come immagine di sfondo (Passo 2), ed è in realtà un tag con il href = # attributo (Passaggio 1), quando viene fatto clic, rimuove l'identificatore di frammento dalla fine dell'URI. Quindi anche rimuove il :bersaglio pseudo-classe dall'immagine e dall'immagine torna alla sua dimensione precedente.

Informazioni di base: perché e non ?

Ormai, sicuramente capisci che la cosa più importante per questa soluzione solo CSS è lavorare indirizzare l'immagine usando il href = "# imgid" attributo, che potrebbe anche essere fatto usando il tag al posto della mappa immagine.

Il predefinito valore per forma attributo crea a area rettangolare collegabile che copre l'intera immagine. Se dovessi usare invece, dovresti codificarlo per coprire l'immagine, e potresti anche dover usare un elemento wrapper per lo stesso scopo.

Per supportare i browser IE prima di questo, potresti volerli utilizzare invece di , oppure ingrandire l'immagine facendo clic in qualsiasi punto (in questo caso non sarà necessario per l'icona Espandi).