Effetto zoom su immagini con i CSS

É pur vero che possiamo realizzare un simile effetto con il linguaggio di scripting più diffuso e conosciuto, vale a dire il Javascript. Ma se possiamo eliminare un pò di codice che potrebbe appesantire la pagina, perchè non tentare? Allora mettiamoci all´opera e cominciamo.

Cosa ci serve

Per l´esempio odierno, ho utilizzato 2 sole immagini: una miniatura che ho chiamato tumb.jpg e la stessa fotografia, di dimensioni reali, che ho chiamato big.jpg. Per il resto... basta qualche dichiarazione di codice CSS ed il gioco è fatto.

L´applicazione in teoria

È mia abitudine non dare tutto per scontato quando devo spiegare qualcosa [spero non me ne vogliate per questo], per cui, prima di passare alla descrizione del codice che utilizzeremo, credo sia meglio descrivere cosa andremo a realizzare.

Data una immagine in miniatura [tumb.jpg], o un numero indefinito di immamgini, quando passeremo su di essa, o su di esse, apparirà nella pagina, in un punto stabilito da noi, la fotografia a dimensioni reali [big.jpg]. Ho pensato anche di aggiungere una "comodità": vale a dire la possibilità di cliccare sulla "tumb.jpg" per fermare la fotografia più grande, senza dover stare fermi con il mouse sulla miniatura. Questo effetto, però, lo si può vedere con Internet Explorer. FireFox, Mozilla ed Opera, non "mantengono" a video la fotografia grande. Da qui è nato il titolo: "zoom su una immagine con i CSS". Possiamo chiamarlo anche "Effetto lente di ingrandimento". Come volete; tanto il risultato non cambia. Adesso credo sia giunto il momento di cominiciare, partendo dal codice che deve "contenere" la mini-foto.

Il codice CSS per la tumbnail

#content{
position:relative; 
top:10px;
left:50px
width:75px;
height:54px;
background-color:transparent;
z-index:100;
} 

Il contenitore per la foto in miniatura è posizionato in maniera "relativa" a 10 pixel dall´alto e 50 da sinistra, in quanto ad esso farà riferimento la fotografia più grande. Vale a dire che le coordinate faranno capo al div content. Larghezza ed altezza, come è facile immaginare, sono uguali a quelle della miniatura stessa.

#content a img{
border:0;
}

Eliminiamo i bordi inestetici quando nel #content sono presenti delle immagini a cui verranno associati dei link; effettivamente è il nostro caso.

  
#content a.tumb, #content a.tumb:visited{
display:block;
width:75px;
height:54px;
text-decoration:none;
background-color:#fff; 
}

Con il codice appena scritto abbiamo dichiarato la classe "tumb" [ma potevamo chiamarla anche con un altro nome] quando ad essa sono associate le pseudo-classi "a" ed "a:visited". Esse sono state rese "block" in quanto tutta l´area utile [vale a dire la dimensione della mini-foto] è sensibile al passaggio del mouse. "Text-decoration:none" serve per non far apparire, al di sotto della foto, la sottolineatura del link. Il colore di sfondo l´ho reso uguale a quello della pagina.

#content a.tumb:hover, #content a.tumb:active{
text-decoration:none 
background-color:transparent;
} 

Questo codice serve, invece, per gli altri 2 stati delle pseudo-classi; da notare che lo stato a.tumb:active è quello che mantiene "fissa" la fotografia grande, dopo aver cliccato sulla corrispettiva piccola.

Il codice per la fotografia grande

Siamo giunti, adesso, a scrivere il codice per far apparire, nello stato :hover sulla mini-foto, l´immagine grande. Questa parte è molto importante in quanto contiene il "trucchetto" di tutta l´applicazione. Ma andiamo con ordine. Si deve dichiarare una classe, che ho nominato .grande per riferirci in maniera facile all´oggetto al quale viene applicata.

#content a .grande{
display:block;
position:absolute;
width:1px;
height:1px;
top:-1px;
left:-1px;
color:#fff;
background-color:transparent;
}  

Anche in questo caso la dichiarazione "display:block" serve a rendere sensibile tutta l´area della fotografia grande. Dopo averla posizionata in maniera assoluta, la portiamo "fuori" dall´area della miniatura. Dove? Esattamente a -1 pixel dall´alto e -1 pixel da sinitra. Per annullare al massimo la sua visualizzazione, essa deve essere alta e larga 1 pixel. In poche parole è come se l´immagine piccola "contenesse" quella grande. Questo effetto avviene con la dichiarazione nello stato "hover", quando passiamo con il mouse.

#content a.tumb:hover .grande{
display:block; 
position:absolute;
top:70px; 
left:200px;
width:401px;
height:289px;
} 

Con il codice qui su riportato, ed è l´ultimo che scriviamo, dichiariamo "dove" vogliamo che la fotografia a dimensioni reali, appaia. Ho scritto che la si vuole visualizzare a 70 pixel dall´alto ed a 200 pixel dal lato sinistro. Con le prove che ho fatto io, diciamo che appare quasi al centro della pagina, tenendo conto che non ci sono altri elementi. Display:block, come nel caso della piccola fotografia, serve per estendere l´area sensibile [solo con Internet Explorer], nel caso si voglia associare un link. Width ed height sono le dimensioni della fotografia di dimensioni reali.
Direi che è tutto per quanto riguarda questo articolo. Non ci resta che vedere la pagina di esempio.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati