Image overlaps with open menu

Question

Good evening everyone. I’m making my portfolio, and I realized that when I open the side menu, an image overlaps. That way:

Here’s my CSS (I made it with Sass):

.sessao-formacoes {
background-color: #363636;
width: 100%;
height: 105.3vh;

.formacoes-header {
    h1 {
        font-family: $fonte-primaria;
        color: #fcfcfc;
        font-size: 2.5rem;
        text-align: center;
        padding-top: 2rem;
        padding-bottom: 2rem;
        text-decoration: underline;
    }
}

.formacoes {
    display: flex;
    justify-content: space-evenly;

    .card {
        width: 25rem;
        height: 25rem;
    }

    .card-imagem {
        background-color: #fcfcfc;
        width: 100%;
        height: 100%;
        border-radius: 0.5rem;

        img {
            object-fit: contain;
            width: 100%;
            height: 100%;
            opacity: .9;
        }
    }

    .card-info {
        text-align: center;

        h2 {
            font-family: $fonte-primaria;
            color: #fcfcfc;
            padding-top: 0.5rem;
            padding-bottom: 1rem;
        }

        h3 {
            font-family: $fonte-secundaria;
            color: #f3f3f3;
            padding-bottom: 1rem;
        }

        p {
            font-family: $fonte-acao;
            color: #e7e7e7;
            padding-bottom: .2rem;
        }
    }
}

}

Can anyone help me? I couldn’t figure out why it happens.

Answer 1

Hello, a simple solution would be to use the z-index with higher value for the side menu and insert it in the other components with a lower value; this way the menu will always be in front of the images when it is open.