Sicuramente non si può fare tutto, con i css. E dove non arrivano, per ottenere quello che vogliamo, servono altri linguaggi/soluzioni. Eppure i css arrivano molto lontano - molto più di quanto la maggioranza di noi sospettino.

Una galleria di immagini via css che mi ha molto impressionato, e di cui ho scritto, mesi fa, è Hoverbox. Adoro la sua eleganza e la sua semplicità.

Più di recente ho studiato i menu stile dropdown, via css. E fatto qualche esperimento (tipo Suckerloz e Newdrop).

Adesso, con lo stesso codice html base (una lista dai cui item si aprono sottoliste interne, child lists), e con la stessa tecnica css (le sottoliste sono nascoste di default, e si attivano al passaggio del mouse sull'elemento "padre"), faccio vedere come si può gestire una - semplice - galleria di immagini.

Ecco i due esempi che ho preparato, di Karina (che è la persona ritratta nelle foto, e il nome della tecnica). Una versione orizzontale e una versione verticale.

La tecnica è davvero abbastanza basilare, e funziona con IE6, IE7, Firefox (testato sulla 2.0, ma non dovrebbe aver problemi neppure la 1.x). Dovrebbe funzioniare anche con Opera & cia - browser sicuramente meno problematici che la famiglia IE (che cmq con ie7 ha fatto dei discreti passi avanti).

Il layout della pagina di esempio è tutto sommato molto semplice, ma è facile immaginare l'implementazione della tecnica in contesti + complessi (magari + avanti farò qualche demo).

(Un'altra aggiunta interessante potrebbe essere quella di un "loader", che segnali che le immagini stanno caricando, in background.)

HoverLightbox integra tre script: il Suckerfish dropdown menu, l'image preview via css di Hoverbox e la finestra in javascript di Lightbox. Risultato? HoverLightbox, di Jon Christopher.

Ho messo sul mio sitarello at Circolab una paginetta, questa pagina qui, dove faccio un veloce confronto tra Hoverbox e le due versioni esistenti di HoverLightbox (la prima, dell'anno scorso, e la versione Redux, di quest'anno). E propongo qualche esempio.

Là ci sono anche un paio di considerazioni, su peso e compatibilità cross-browser dello script. Documentazione più completa - in inglese - sul Monday by Noon, ovvero sul sito originale di HoverLightbox.