Animiamoci con i CSS - Effetto "ingrandimento" sulle immagini

Buon pomeriggio!

Parliamo di nuovo di CSS e Html con una nuova proposta MadeByMe. Eccola qua: 

• 
• 
• 
• 
• 
• 

La tecnica è simile a quella utilizzata per il menù dei precedenti articoli, con la differenza che qui utilizzeremo il posizionamento assoluto. Niente panico. Vediamo subito di cosa abbiamo bisogno:

• immagini per la nostra galleria. E' importante che la dimensione sia maggiore o uguale a quella raggiunta con l'effetto hover (passandoci sopra con il mouse) altrimenti le immagini una volta ingrandite potrebbero risultare sgranate. Nel mio caso, le immagini hanno dimensioni originali pari a 250x339px. Per la galleria le ho ridimensionate via CSS a 130x176px e per l'effetto hover a 180x244px. In questo modo la dimensione originale 250x339 è maggiore di quella ottenuta con l'ingrandimento 180x244.
• Conoscenza minima di CSS e Html (come al solito).

Vediamo velocemente il codice Html che è molto simile a quello dei precedenti articoli:

<div id="glamour">
<ul>
<li><a href=""><img alt="copertina 1" src="1.jpg" /></a></li>
<li><a href=""><img alt="copertina 2" src="2.jpg" /></a></li>
<li><a href=""><img alt="copertina 3" src="3.jpg" /></a></li>
<li><a href=""><img alt="copertina 4" src="4.jpg" /></a></li>
<li><a href=""><img alt="copertina 5" src="5.jpg" /></a></li>
<li><a href=""><img alt="copertina 6" src="6.jpg" /></a></li>
</ul>
</div>

Solito elenco dentro un contenitore con un identificativo a cui sarà assegnato uno stile.

La prossima settimana vedremo le regole del foglio di stile e termineremo questo piccolo tutorial.

Buona settimana!