Efecto overlay con CSS 🤓

⚫ Ejemplo

⚫ HTML

⚫ CSS

🟣 Clase img

🟣 Pseudoelemento after

🟣 Programando el hover

🟣 Código CSS completo

Efecto overlay con CSS 🤓

Te enseño cómo crear un efecto overlay sólo con CSS, sin librerías 😎

Ejemplo

Un ejemplo de lo que te voy a enseñar a programar, pasa el cursor por encima de la imagen o si estás con un móvil o tablet haz clic en la imagen 👇

HTML

Un HTML muy básico, prácticamente una plantilla de HTML 5 básica con un div con la clase img:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Overlay efect</title>
</head>
<body>
  <div class="img"></div>
</body>
</html>

CSS

Clase img

Tomo una imagen random de Internet y la pongo como fondo de mi div con la clase img

.img {
  width: 90%;    
  height: 450px;
  margin: 0 auto; /* El div se centra en el eje x */
  margin-top: 50px;

  background-image: url('https://images.unsplash.com/photo-1522252234503-e356532cafd5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1025&q=80');
  background-size: cover;
  background-position: center;

  position: relative; /* Para que el seudoelemente esté dentro del elemento con esta clase */
  overflow: hidden; /* Para que todo lo que salga del div con esta clase no se muestre */
}

Pseudoelemento after

.img::after {
  content: "Estás en fjmduran.com";
  font-size: 2rem;
  font-weight: 500;
  color: black;
  background-color: rgba(240, 240, 240, 0.75);
  position: absolute;
  inset: 0;

  /* Con las siguientes 2 líneas consigo centrar el contenido en el div tanto en X como en Y */
  display: grid;
  place-items: center;

  transform: translateY(100%); /* Lo saco del div para que no se vea */
  transition: transform .4s;    
}

Programando el hover

.img:hover::after {
  transform: translateY(0); /* Lo muevo al div */
}

Código CSS completo

.img {
  width: 90%;    
  height: 450px;
  margin: 0 auto; /* El div se centra en el eje x */
  margin-top: 50px;
  background-image: url('https://images.unsplash.com/photo-1522252234503-e356532cafd5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1025&q=80');
  background-size: cover;
  background-position: center;
  position: relative; /* Para que el seudoelemente esté dentro del elemento con esta clase */
  overflow: hidden; /* Para que todo lo que salga del div con esta clase no se muestre */
}

.img::after {
  content: "Estás en fjmduran.com";
  font-size: 2rem;
  font-weight: 500;
  color: black;
  background-color: rgba(240, 240, 240, 0.75);
  position: absolute;
  inset: 0;
  /* Con las siguientes 2 líneas consigo centrar el contenido en el div tanto en X como en Y */
  display: grid;
  place-items: center;
  transform: translateY(100%); /* Lo saco del div para que no se vea */
  transition: transform .4s;    
}

.img:hover::after {
  transform: translateY(0); /* Lo muevo al div */
}

Hasta luego 🖖