Effetto Fade-in sulle immagini al passaggio del mouse

Effetto Fade-in sulle immagini al passaggio del mouse
Effetto Fade-in sulle immagini al passaggio del mouse

Nell'articolo odierno vedremo come creare un effetto "Fade In" su una immagine. Vale a dire che al passaggio del mouse, nello stato hover, la stessa immagine verrà interamente ricoperta da un colore di sfondo, oltre a far apparire una descrizione della stessa. Tale animazione verrà creata utilizzando solo codice CSS3, senza alcun rigo di Javascript.

Effetto Fade-in al passaggio del mouse

Verrà creata una animazione grazie al codice CSS, la quale consiste nella sovrapposizione di un colore di background sull'immagine. Tale animazione avverrà nel momento in cui sull'immagine si passerà con il mouse.

All'immagine verrà applicata una classe, che possiamo nominare come desideriamo. Per implementare la dissolvenza con animazione, verrà utilizzato l'attributo HTML5 data-effect.

Qui di seguito il codice HTML.

<figure class="nomeClasse" data-effect="fade-in">
<img src="/immagine.jpg" alt="" />
<figcaption>
<h2>Cover Fade</h2>
<p>Lorem ipsum dolor sit amet.</p>
</figcaption>
</figure>

Servono poche righe di codice, HTML e CSS, per ottenere l'effetto oggetto dell'articolo.

Come anticipato, prima di scrivere il codice, ci si deve avvalere del tag figure, al cui interno posizioniamo l'immagine, oltre ad un titolo e qualche rigo di testo. Titolo e testo fanno parte dell'attributo figcaption.

Il codice CSS

Cominciamo a vedere il codice CSS.

.nomeClasse{
position: relative;
overflow: hidden;
width: 90%;
margin: 0 auto;
}

.nomeClasse img {
width: 100%;
display: block;
-moz-transition:800ms;
-webkit-transition: 800ms; 
-o-transition: 800ms; 
transition: 800ms;
}

Aggiungiamo il colore RGBA di sfondo al tag figcaption.

.nomeClasse figcaption {
background: rgba(0,0,0,0.8);
color: #fff;
padding: .5rem;
position: absolute;
-webkit-transition: 800ms; 
-o-transition: 800ms; 
transition: 800ms;
width: 100%;
cursor: pointer;
}

Infine il codice per l'attributo data-effect. Verrà impostata l'opacità a zero quando l'immagine non è attraversata dal mouse e verrà impostata su 1 quando vorremo avere l'effetto fade-in.

.nomeClasse[data-effect="fade-in"] figcaption {
top: 0;
left: 0;
height: 100%;
opacity: 0;
}

.nomeClasse[data-effect="fade-in"]:hover figcaption {opacity: 1;}

Come si può notare, il codice è facilmente personalizzabile a seconda delle proprie necessità. Si fa in un attimo a cambiare il colore di sfondo, il titolo ed il testo. Per completare l'articolo odierno, ho preparato una pagina demo con in azione.