Como criar: efeito de camada

Aprenda a criar um efeito de sobreposição usando CSS (um efeito de sobreposição).

Como criar um efeito de sobreposição

Primeiro passo - Adicione HTML:

Use qualquer elemento e coloque-o em qualquer posição do documento:

<div id="overlay"></div>

Segundo passo - Adicione CSS:

Defina o estilo do elemento de sobreposição:

#overlay {
  position: fixed; /* Localizado no topo do conteúdo da página */
  display: none; /* Oculto por padrão */
  width: 100%; /* Largura total (cobre toda a página) */
  height: 100%; /* Altura total (cobre toda a página) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Fundo preto com transparência */
  z-index: 2; /* Se você usar uma ordem diferente para outros elementos, especifique a ordem de empilhamento */
  cursor: pointer; /* Adicione o ponteiro do mouse ao passar por cima */
}

Terceiro passo - Adicione JavaScript:

Abra e feche o efeito de sobreposição usando JavaScript:

function on() {
  document.getElementById("overlay").style.display = "block";
}
function off() {
  document.getElementById("overlay").style.display = "none";
}

Experimente pessoalmente

Efeito de sobreposição com texto

Adicione qualquer conteúdo que desejar ao sobreposição e coloque-o na posição desejada. Neste exemplo, adicionamos o texto no centro da página:

Exemplo

<style>
#text{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}
</style>
<div id="overlay">
  <div id="text">Texto de sobreposição</div>
</div>

Experimente pessoalmente