Gostaria de saber como adicionar "efeitos" em show e hide, eu tentei adicionar no meu código mas não obtive sucesso. Pois tentei mostrar apenas uma div comum com classe no css que desse a aparência que a da imagem tem, mas ele fica por trás de outros elementos, ele não fica na tela inteira como tem que ser.
Código
<div class="teste" style="width: 100%;height: 500px;background: rgba(52, 90, 76, 0.8);">
<div style="margin: auto;width: 50%;height: 300px;background: #fff;">
conteudo da div blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
</div>
</div>