Effetto zoom su dettaglio di un immagine in css

Basato sulla creazione di un immagine mappata in css, possiamo creare un effetto zoom su un dettaglio di un immagine di sfondo.

Immagine di preview:

Iniziamo per creare le immagini, una di sfondo e una per ogni dettagli

• sfondo.jpg: l’immagine di sfondo
  • 
• dettaglio1.jpg: l’immagine del primo dettaglio
  • 
• dettaglio2.jpg: l’immagine del secondo dettaglio
  • 
• dettaglio3.jpg: l’immagine del terzo dettaglio
  • 

La struttura html:

La struttura html consista in un semplice div con un identificatore unico con al suo interno 3 elementi <a> (i link) con ogni uno due nomi di classe. Il primo (dettagli)per evitare di ripetere le stesse regole css comune tra di loro, il secondo (dettaglio1, 2…)per applicare lo stile css relativo a questo link.
Questi link contengono a loro torno l’immagine del dettaglio (elemento <img />)

<div id="css_zoom">
<a class="dettagli dettaglio1" href="#nogo"><img src="dettaglio1.jpg" alt="" /></a>
<a class="dettagli dettaglio2" href="#nogo"><img src="dettaglio2.jpg" alt="" /></a>
<a class="dettagli dettaglio3" href="#nogo"><img src="dettaglio3.jpg" alt="" /></a>
</div>

Il CSS per creare l’effetto zoomato:

Per dare lo stile generale al div contenitore con id="css_zoom" specifichiamo:

• una posizione relativa che ci permetterà di seguito a posizionare in modo assoluto i link in rapporto al questo elemento contenitore
• la larghezza (width) e altezza (height) uguale alle misure dell’immagine di sfondo
• la nostra immagine di sfondo posizionato centralmente con la proprietà css background
• come extra puramente decorativo, un spazio cuscinetto (padding) di 10px attorno l’immagine di sfondo e un bordo attorno l’elemento.

#css_zoom{
position:relative;
width:400px;
height:300px;
background:#000000 url(sfondo.jpg) no-repeat center;
padding:10px;
border:2px solid #CCCCCC;
}

Per lo stile generale ai nostri link usiamo il nome della class ‘dettagli’.

• Convertiamo i link da elemento inline a elemento di blocco (display:block;) per potere specificare una larghezza (width) e altezza (height).
• Specifichiamo una posizione assoluta per potere di seguito posizionare al pixel preciso ogni single link
• come extra puramente decorativo, aggiungiamo un bordo attorno l’elemento e rimuoviamo i bordi griggi per Firefox con outline:none;

#css_zoom a.dettagli{
display:block;
width:80px;
height:80px;
position:absolute;
border:1px solid #FFFFFF;
outline:none;
}

Usando il secondo nome di classe di ogni link e grazie alla posizione assoluta, posizioniamo ogni link in rapporto al div contenitore.

#css_zoom a.dettaglio1{
top:86px;
left:48px;
}
#css_zoom a.dettaglio2{
top:50px;
left:263px;
}
#css_zoom a.dettaglio3{
top:200px;
left:251px;
}

Nascondiamo gli immagine del dettaglio in apertura con la proprietà css display.

#css_zoom a.dettagli img{
display:none;
}

Finalmente possiamo passare allo stile dei link sullo stato hover.

• cambiamo le misure dei link da 80×80 a 180×180 (la misura dell’immagine del dettaglio)

#css_zoom a:hover.dettagli{
width:180px;
height:180px;
}

• rendiamo l’immagine visibile quando si passa sopra i link con il mouse cambiando il valore della proprietà display da none (nessuno) a block (elemento di blocco)

#css_zoom a:hover.dettagli img{
display:block;
}

• riposizioniamo i link cambiando i valori top e left in modo che rimangono centrati con la loro posizione iniziale riusando il secondo nome di classe.
  Per questo esempio, il spostamento è di 50px verso la sinistra e 50px verso l’alto, equivalente ai valori left e top iniziali meno 50px, 50 essendo il risultato della misura dell’immagine del dettaglio (180) meno la misura iniziale del link (80) diviso per 2 per il centramento.

#css_zoom a:hover.dettaglio1{
top:36px;
left:-2px;
}
#css_zoom a:hover.dettaglio2{
top:0;
left:213px;
}
#css_zoom a:hover.dettaglio3{
top:150px;
left:201px;
}

Su una nota generale…

• Togliamo i bordi alle immagini linkate aggiunti automaticamente dai browser

#css_zoom img{
border:none;
}

Il risultato finale:

Provato su IE6, IE7, FF2, FF3, Safari3, Opera9, Google Chrome su Windows.

Tutorial riscritto il 27 Aprile 2009, dovuto a un problema d’incompatibilità con Internet Explorer