Effetto zoom su immagine con i CSS
Articolo scritto da Luca Ruggiero
Attraverso il solo impiego di codice CSS possiamo ottenere un ottimo effetto zoom su immagini che evita di utilizzare complessi script, popup e librerie, rendendo molto leggero ed appetibile l'effetto finale.
Vediamo in pratica otterremo:
(L'articolo continua più sotto...)
Il codice HTML andrà strutturato come di seguito schematizzato:
LINK
IMMAGINE PICCOLA
SPAN NASCOSTO
IMMAGINE GRANDE
FINE SPAN
FINE DEL LINK
Segue il codice HTML utilizzato nell'esempio documentato in precedenza:
<a href="#" class="zoom"> <img src="piccola_1.jpg" border="0"> <span><img src="grande_1.jpg"></span> </a> <a href="#" class="zoom"> <img src="piccola_2.jpg" border="0"> <span><img src="grande_2.jpg"></span> </a>In sostanza mostreremo a video l'immagine piccola e, all'evento hover del link, attiveremo la visualizzazione del contenuto dello span nascosto, rendendolo visibile. Tutto qua!
Vediamo dunque come gestire il codice CSS, iniziando dall'assegnazione del bordo a tutti i tag immagine contenuti all'interno del link con classe zoom:
a.zoom img
{
border: solid 1px #000000;
}
Nascondiamo poi tutti gli span contenuti sempre all'interno del link con la classe sopra citata:
a.zoom span
{
position: absolute;
visibility: hidden;
}
Impostiamo l'evento hover sulla miniatura, gestendo sia il posizionamento che la sovrapposizione:
a.zoom
{
position: relative;
z-index: 0;
}
a.zoom:hover
{
z-index: 1;
}
In fine impostiamo la visualizzazione e la posizione da sinistra e da destra dell'immagine grande rispetto alla piccola:
a.zoom:hover span
{
visibility: visible;
top: 10;
left: 70px;
}
