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/
Pacman
Nostradamus
Magical Cat Adventure
Snake