Questa è la traduzione dell'articolo Create Resizing Thumbnails Using Overflow Property di Alen Grakalic pubblicato originariamente su CSS Globe il 14 Febbraio 2008. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.
Questo breve tutorial spiega come controllare la misura delle miniature che appaiono sulle vostre pagine. A volte non abbiamo spazio sufficiente per inserire miniature sufficientemente grandi e nello stesso vorremmo evitare di rimpicciolirle troppo, fino al punto di rendere le immagini irriconoscibili. Usando questo trucchetto limitiamo le dimensioni di default dell'immagine miniaturizzata e mostriamo le sue dimensioni normali al passaggio del mouse.
Potete sin da subito dare un'occhiata alla demo e scaricare l'esempio completo.
Uno sguardo d'insieme
Quello che andremo a fare non è ridimensionare l'immagine. È piuttosto un ridimensionamento dell'area visibile della miniatura al passaggio del mouse, quindi in stato di :hover. Come realizziamo il tutto? Usando la proprietà overflow.
La proprietà overflow definisce l'aspetto e la visualizzazione del contenuto quando esso eccede i limiti del suo elemento contenitore. Se tale elemento ha una misura limitata, per una ragione o per l'altra, possiamo usare la proprietà overflow per definire cosa dovrebbe accadere. I valori possibili sono visible, hidden, scroll e auto. Quello che useremo è una combinazione di questi valori. In pratica, nasconderemo una parte della miniatura quando è nel suo stato di default, la mostreremo per intero al passaggio del mouse.
Il concetto
L'idea alla base di questa tecnica consiste nel piazzare un'immagine all'interno di un container. Dal momento che parliamo di miniature tale elemento contenitore sarà un elemento <a>. Impostiamo le dimensioni (width ed height) del container ai valori desiderati e settiamo la proprietà position del container sul valore relative.
L'immagine all'interno ha invece un posizionamento assoluto. Usiamo valori negativi per i valori top e left per spostare l'immagine. Il container ha la proprietà overflow impostata su hidden, così solo una parte dell'immagine che è posizionata all'interno del container sarà visibile. Il resto sarà nascosto. Nello stato :hover impostiamo l'overflow del container su visible e mostriamo l'intera immagine.
Il codice
La tecnica può essere usata per liste di miniature o per miniature singole, come si può vedere nella demo. Per il markup usiamo questo codice:
<a href="#"><img src="image.jpg" alt="my image" /></a>
La definizione dello stato di default delle immagini nel CSS sarà come questa:
ul#thumbs a{
display:block;
float:left;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
ul#thumbs a img{
float:left;
position:absolute;
top:-20px;
left:-50px;
}
L'elemento <a> presenta una larghezza (width) e un altezza (height) definite in base alle dimensioni che ci servono in base al nostro layout. Inoltre, la proprietà overflow è settata su hidden. Poi impostiamo i valori negativi per top e left per "tagliare" l'immagine come meglio ci serve. Volendo, potrete anche definire l'area di cropping per ciascuna singola immagine della lista:
ul#thumbs a img{
float:left;
position:absolute;
top:-20px;
left:-50px;
}
ul#thumbs li#image1 a img{
top:-28px;
left:-55px;
}
ul#thumbs li#image2 a img{
top:-18px;
left:-48px;
}
ul#thumbs li#image3 a img{
top:-21px;
left:-30px;
}
.
.
.
Ora, quando l'utente sposta il mouse sull'immagine, impostiamo overflow su visible:
ul#thumbs a:hover{
overflow:visible;
z-index:1000;
border:none;
}
Notate lo z-index per lo stato di default e per quello di :hover. È estremamente importante perché vogliamo posizionare al punto giusto l'immagine, in alto, altrimenti sarebbe piazzata sotto e la tecnica sarebbe inutile.
