Effetto sliding sulle immagini con i CSS

Quello che avremo al termine dell' articolo sarà una porzione di una foto, da scegliere a nostro piacere "quanto" mostrare inizialmente, che si estenderà per tutta la sua ampiezza quando saremo sopra di essa con il mouse. Il risultato finale sarà possibile averlo anche su browser un pò più datato, ma ancora in uso, rispetto alla versione 6.0 di Internet Explorer, vale a dire la versione 5.01.

Il codice CSS

Fatta questa piccola premessa, passiamo alla scrittura del codice. Innanzitutto dobbiamo inserire la nostra foto in un contenitore di larghezza ed altezza pari alle misure dell' immagine:

#container{ 
margin:20px auto; 
padding:0; 
list-style-type:none; 
height:350px;
background: #fff; 
width:500px; 
} 

Perchè list-style-type:none? Il motivo è quello di avere una pagina accessibile quando siamo in presenza di utenti con difficoltà che non possono avvalersi di browser grafici. In quel caso essi vedranno l' elenco delle immagini, o di altri elemnti, una sotto l' altra. Stabilito che si tratta di un semplicissimo elenco, procediamo con la scrittura del codice:

#container li{ 
float:left;
} 

L' elemento <li> sarà flottante a sinistra.

#container li a{
display:block;  
height:30px; 
width:500px; 
float:left;  
text-decoration:none;
}  

Quando all' elemento <li> verrà associato un link, esso avrà le caratteristiche che ho scritto nel codice qui sopra.
display:block perchè tutta l' area "utile" sarà uguale all' ampiezza della foto;
height:30px è la parte della foto "contratta" che verrà visualizzata all' apertura della pagina;
width:500px è la larghezza della foto;
float:left perchè anch' esso sarà flottante verso sinistra e senza nessun bordo quando passeremo sull' immagine con il mouse [text-decoration:none].

#container li a img{ 
width:500px;  
height:30px;  
border:0; 
}  

Questo codice imposta lo stato "a:link" quando all' elemento <li> è associata una immagine. Si possono notare le stesse dimensioni che abbiamo visto precedentemente per la larghezza e l' altezza, oltre a non avere nessun bordo.

#container li a:hover{
background:#fff; 
height:350px; 
}  

Nello stato ":hover", invece, avremo un colore di sfondo [che qui ho impostato uguale a quello della pagina] e l' altezza che la foto deve avere quando siamo su di essa con il mouse. 350px è, effettivamente, l'altezza dell' immagine.

#container li a:hover img{
height:350px; 
}  

Anche in questo caso dobbiamo dichiarare lo stato ":hover" per l' elemento <li> in presenza dell' immagine. Come si può vedere, si deve scrivere l' altezza della foto.
Questo codice è quello che ci serve per ottenere il nostro effetto "fisarmonica" o, come come si dice in inglese, effetto sliding: effetto scorrevole. La pagina di esempio mostra tale effetto ma non è correttamente visualizzabile in Internet Explorer 5.01 [di cui ci occuperemo tra breve], apportando qualche piccola modifica al codice CSS.

Adattare il codice CSS per IE 5.01

Per fare in modo che anche su IE 5.01 abbiamo lo stesso risultato, non dobbiamo fare altro che aggiungere la proprietà overflow:hidden all' elemento #container li a. Il codice è del tutto simile a quello che ho scritto più su

#container_ie li a{ 
display:block;
height:30px; 
width:500px; 
overflow:hidden;
text-decoration:none;  
} 

Nella parte in grassetto si può vedere l' unica differenza con l'altro codice valido per gli altri browser. Questo perchè IE 5.01 non "comprime" la foto come abbiamo visto nella pagina di esempio precedente ma visualizza solo quanti pixel abbiamo dichiarato di voler mostrare; nel nostro caso sempre 30 pixel. Fornendo tale codice al browser Internet Explorer nella versione precedente alla 6.0, non ci resta che vedere anche questa pagina finale di esempio.