CSS  »  Articoli  »  Effetti con CSS 

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.

Figura 1 - Schema di funzionamento della tecnica

Altri articoli

Altre guide

Altre newsletter