¿Cómo crear: Efecto de capa superior

Aprenda a crear un efecto de capa de superposición utilizando CSS (un efecto de superposición).

Cómo crear un efecto de capa de superposición

Paso 1 - Añadir HTML:

Use cualquier elemento y colóquelo en cualquier posición del documento:

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

Paso 2 - Añadir CSS:

Establezca los estilos del elemento de capa de superposición:

#overlay {
  position: fixed; /* Situado en la parte superior del contenido de la página */
  display: none; /* Oculto por defecto */
  width: 100%; /* Ancho completo (cubre toda la página) */
  height: 100%; /* Alto completo (cubre toda la página) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Fondo negro con transparencia */
  z-index: 2; /* Si usa un orden diferente para otros elementos, especifique el orden de apilamiento */
  cursor: pointer; /* Añadir puntero del ratón al pasar por encima */
}

Paso 3 - Añadir JavaScript:

Abra y cierre el efecto de capa de superposición utilizando JavaScript:

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

Pruebe personalmente

Efecto de capa de superposición con texto

Añada cualquier contenido que desee en la capa de superposición y colóquelo en la posición deseada. En este ejemplo, hemos añadido texto en el centro de la página:

Ejemplo

<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 superposición</div>
</div>

Pruebe personalmente