Efecto overlay con CSS 馃

Te ense帽o c贸mo crear un efecto overlay s贸lo con CSS, sin librer铆as 馃槑

08.10.2022 a las 20:08

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 馃枛

Servicios

Software

IoT

Digitalizaci贸n

Aplicaciones m贸viles

Consultor铆a

fjmduran.com v0.1.2