Tutorial CSS: Realizzare una galleria di immagini con informazioni a scomparsa.

In questo tutorial vedrai come realizzare una galleria di immagini, dove, al passaggio del mouse sopra ad ogni immagine compariranno informazioni relative all’immagine.

Demo

Download

La struttura HTML

Per iniziare ho creato un div contenitre con class .box che contiene altri due div, il primo con classe .info pensato per inserire tutte le informazioni relative alla immagine e il secondo con classe .immagine dove inserire l’elemento HTML img, la struttura creata quindi ha questo aspetto:

 <div class="box">
        <div class="info"> 
           <h1>Lorem Ipsum</h1>
           <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
        </div>
        <div class="immagine">
           <img src="immagini/immagine.jpg" width="100%" height="100%" title="Titolo dell'immagine" alt="Descrizione dell'immagine"/>
        </div>
 </div> <!-- Fine box -->

La formattazione degli elementi con CSS

Il div con classe .info e quello con class .immagine si devono sovrapporre uno sopra l’altro, mantenendo quello con le informazioni sotto a quello con l’immagine facendo in modo che .info compaia solo al passaggio del mouse.

Per fare questo ho assegnato la proprietà position:relative al div con classe .box, l’impostazione di questa proprietà sarà fondamentale nel passaggio successivo, poi, sempre a .box, ho assegnato una larghezza ed altezza a piacere, in questo caso 200px per 200px.

.box { position:relative; 
       width:200px; height:200px; 
       cursor:pointer; background:#333;
       color:white; 
       border:2px solid #333; 
       float:left; 
       margin: 10px 40px 10px 0;
}

Ora i due div figli di .box sono ancora uno affianco all’altro, il secondo passaggio quindi consiste nel sovrapporre i div .info e .immagine assegnandoli la proprietà position:absolute e un allineamento in alto e a sinistra uguale a 0px in maniera che aderiscano perfettamente al div .box.

.box > div { position:absolute; 
             top:0; left:0;
}

A questo punto i div figli sono sovrapposti l’uno all’altro, il prossimo obiettivo è asegnare la proprietà opacity e la pseudoclasse :hover per fare in modo che al passaggio del mouse il div .immagine scompaia per svelare .info, infine, per fare in modo che la transizione tra una div e l’altro sia gradevole alla vista ho usato la proprietà CSS3 transition, questo è il codice CSS:

div.immagine { opacity:1;  
     -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
     -moz-transition: all 0.3s ease-out;  /* FF4+ */
      -ms-transition: all 0.3s ease-out;  /* IE10? */
       -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
          transition: all 0.3s ease-out;    }
div.immagine:hover { opacity:0; 
     -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
     -moz-transition: all 0.3s ease-out;  /* FF4+ */
      -ms-transition: all 0.3s ease-out;  /* IE10? */
       -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
          transition: all 0.3s ease-out;  }

Compatibilità Browser

Qualche problema di compatibilità viene dato dalla proprietà opacity che non funziona su IE versione 6-7 e 8 ma grazie ad un filtro si può sopperire a questo problema:

.elemento { opacity:0.5;
            filter: alpha(opacity = 50);
}

Altro problema potrebbe essere dato dalla proprietà transition che non viene supportata sopratutto da IE e dalle versioni più vecchie di alcuni maggiori browser.

Condividi questo articolo:

• Tweet

Info sull' autore:

Nato a Bologna, mi occupo della realizzazione grafica e dello sviluppo front-end di siti web e sono il fondatore di questo blog. Se vuoi segnalare qualche problema o hai qualche richiesta particolare invia una mail tramite il modulo contatti.
Leggi gli altri articoli di Francesco