Animiamoci con i CSS - Effetto "ingrandimento" sulle immagini - PARTE II

Creato il 05 settembre 2011 da Oltrestardoll

Buon pomeriggio!

La settimana scorsa ho completamente dimenticato di completare questo tutorial! Ringrazio ancora la nostra attenta lettrice Vane che me lo ha fatto notare!

Dunque terminiamo questo effetto ingrandimento introducendo gli stili al codice Html. Prima di cominciare rivediamo il risultato finale:

Una precisazione:potreste contestare che su Chrome ed Internet Explorer 9 (o precedenti) l'effetto ingrandimento viene male in quanto l'immagine ingrandita va a finire sotto le altre invece che sopra (cosa che accade giustamente in Firefox). Vi assicuro che il problema non è nel codice che vi ho scritto in quanto sia in locale, sia pubblicato in un altro sito è perfetto per tutti i browser.

Probabilmente c'è qualche conflitto tra il codice del blog (sulla quale non ho alcun potere) e quello della nostra galleria di immagini!

Comunque, visto che non è un problema di base continuiamo tranquillamente con il tutorial! Rivediamo prima di tutto il codice Html:

<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>

Ed ora vi elenco le varie regole CSS e ne descrivo brevemente il significato.

#glamour ul {   // stile per l'elenco dentro il div #glamour

   width:430px;   // ampiezza dell'elenco. Deve essere abbastanza grande da contenere tutte le immagini

   margin:40px auto;     // margine dall'alto e basso pari a 40px, a destra e sinistra centrato

   padding:0;   // padding impostato a zero

   height:400px;        // altezza dell'elenco impostata a 400px

}

#glamour ul li {     // stile per gli elementi li dentro l'elenco ul

   display:inline-block;    // indica che l'oggetto è posizionato in riga (sulla stessa linea del contenuto vicino) ma si comporta come oggetto blocco

   float:left;     // ogni elemento dell'elenco dovrà fluttuare a sinistra.

   position:relative;   // necessario per far si che gli elementi immagine (subito dopo questa regola) devono posizionarsi in base a questo elemento!

   width:140px;

   height:200px;

}

#glamour ul li img {

   position:absolute;   // permette di posizionare l'elemento img in un punto preciso rispetto al suo contenitore (in questo caso li)

   top:0;   // indica la distanza dall'alto che questo elemento dovrà avere rispetto al suo contenitore

   width:130px; height:176px;

   z-index:10;   // serve per controllare quali elementi verranno disposti "sopra" o "sotto" rispetto alla profondità dello schermo. Elementi con z-index maggiore verranno disposti sopra.

   border:2px black solid;   // bordino nero di 2 pixel intorno alle immagini

}

#glamour ul li a:hover img {

   position:absolute;

   top:-34px;  

   left:-25px;   // i valori left e top indicano che un immagine con effetto hover, rispetto al suo contenitore li dovrà posizionarsi in modo assoluto. In questo caso per centrarla abbiamo dato top -34px (calcolato come (altezzaImgHover - altezzaImgNormale)/2) e left -25px (calcolato in ugual modo)

   width:180px;

   height:244px;

   z-index:20;   // z-index maggiore rispetto all'immagine senza effetto hover. Questo perchè quando ci passiamo sopra con il mouse l'immagine deve andare sopra a tutte le altre (che in quel momento non saranno sotto l'effetto hover).

}

Bene, abbiamo terminato anche questo tutorial. Se avete problemi non esitate a contattarmi.

Mi rendo conto che il discorso del posizionamento piò essere un pò antipatico, quindi vi propongo questa lettura per chiarirvi un pò le idee: http://css.html.it/guide/lezione/40/posizionamento-degli-elementi/


Potrebbero interessarti anche :

Possono interessarti anche questi articoli :