Come creare un effetto Overlay in CSS

Personalmente utilizzo moltissimo gli overlay per migliorare la leggibilità del testo sopra un’immagine, ma che cos’è questo overlay?

In poche parole non è nient’altro che un livello intermedio fra l’immagine e il testo, un livello che va ‘opacizzare’ l’immagine per rendere più leggibile il testo.

Logicamente con l’overlay il testo risulta molto più leggibile, e secondo me l’immagnie è anche meno impattante, meno fastidiosa.

Farlo non è affatto difficile.

Come si fa

Basterà recarci all’interno del contenitore dell’immagine, in questo caso nel div con classe sidebar e aggiungere un elemento chiamato “overlay”

 <div class="sidebar" style="background:url('https://images.unsplash.com/photo-1534067783941-51c9c23ecefd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80')">
        <div class="overlay"></div>
        <div class="sidebar-inner">
            <div class="site-header">
                <h2>Nome Sito Web</h2>
                <i>Lorem ipsum dolor sit amet</i>
            </div>
        </div>
    </div>

Con l’html siamo a posto, ora spostiamoci nel nostro file CSS e dobbiamo solamente creare questa classe:

.overlay{
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom:0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 2;
    width: 100%;
    height: 100%;
}

E Voilà! Tutto finito!

Ora non resta che personalizzarla a piacere, cambiando il colore e il livello di opacità.

Buon codice!