Le didascalie animate di un’immagine possono essere realizzate facilmente con le trasformazioni css e la proprietà transition, come mostrato nel seguente esempio.

Creare delle Didascalie animate per le immagini

Creare delle didascalie animate per le immagini

Per ulteriori informazioni consultare gli articoli Le transizioni CSS e Le trasformazioni CSS 2d.

L’immagine e la didascalia in html

Per realizzare l’effetto non è necessaria una particolare struttura html ma è sufficiente adattare l’esempio seguente alle proprie necessità.

Nell’esempio, l’immagine (elemento img) è annidata all’interno di un elemento figure.

<figure>
 <img src="images/5.png" width="400" height="300" alt=""/>
 <figcaption>Testo della didascalia</figcaption>
</figure>

La didascalia, compresa in un elemento figcaption, segue l’immagine.

L’aspetto iniziale della didascalia

L’aspetto iniziale della didascalia è definito in diverse regole css. La prima regola modifica le caratteristiche dell’elemento figure.

figure {
 overflow:hidden; /* Taglia il contenuto in eccesso */
 position:relative; /* Posiziona l’elemento successivo */
 float:left; /* Riduce le dimensioni a quelle del contenuto */
}

La proprietà overflow taglia il contenuto in eccesso e così nasconde la didascalia, l’elemento figcaption, che si trova al di sotto dell’immagine. Invece, la proprietà relative serve per posizionare l’elemento figcaption (vedi oltre) rispetto all’elemento figure. Infine, la proprietà float adatta le dimensioni a quelle dell’immagine che si trova al suo interno.

L’elemento figcaption, viene posizionato in modo assoluto rispetto all’elemento figure, che per questo è in posizione relativa. Gli elementi in posizione assoluta sono rimossi dal flusso del documento e perciò, non vengono utilizzati per calcolare l’altezza degli elementi in cui sono annidati.

figcaption {
 position:absolute;
 width:90%;
 padding:5%;
 background-color:rgba(0,0,0,.85);
 color:#fff;
 transition:.3s;
}

Il risultato sarà che la didascalia si trova al di sotto dell’immagine ma rimane invisibile grazie alla proprietà overflow assegnata all’elemento figure.

Provare a rimuovere l’overflow:hidden all’elemento figure per visualizzare la didascalia sotto all’immagine.

Un’ultima regola riguarda l’allineamento verticale delle immagini che dovrebbe essere impostata in basso per evitare un piccolo margine tra l’immagine e la didascalia.

img {
 vertical-align: bottom;
}

L’effetto a comparsa dal basso

L’effetto a comparsa si verifica quando il mouse si sovrappone all’elemento figure e viene realizzato mediante la proprietà transform e la funzione translateY().

figure:hover figcaption{
 transform: translateY(-100%);
}

La funzione translateY sposta l’elemento in alto, grazie al valore negativo, di una distanza pari alla sua altezza (100%), mostrandolo così interamente. Ulteriori informazioni sulla funzione translateY sono disponibili nell’articolo le trasformazioni css.

La durata della trasformazione invece è controllata con la proprietà transition (vedi anche le transizioni css).

Altre didascalie animate

Modificando la regola dello stato iniziale e finale dell’elemento figcaption è possibile creare infiniti effetti per le didascalie animate delle proprie pagine web.