Scritto da Alberto il 22 Febbraio 2022

Come creare un effetto Overlay in CSS

Sviluppo Web

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!

Potrebbe interessarti anche: