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')"><br>
        <div class="overlay"></div><br>
        <div class="sidebar-inner"><br>
            <div class="site-header"><br>
                <h2>Nome Sito Web</h2><br>
                <i>Lorem ipsum dolor sit amet</i><br>
            </div><br>
        </div><br>
    </div>

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

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

E Voilà! Tutto finito!

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

Buon codice!