Cómo crear: Escalado de superposición de la imagen

Página anterior Deslizar la superposición de imagen
Página siguiente Título de superposición de imagen

Aprende a crear un efecto de superposición escalable al pasar el ratón.

Escalado completo de la superposición de la imagen

Coloca el ratón sobre la imagen para ver el efecto de escalado.

Hola Mundo

Prueba por ti mismo

Cómo crear un efecto de superposición escalable

Primer paso - Añadir HTML：

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hola Mundo</div>
  </div>
</div>

Segundo paso - Añadir CSS：

/* Contenedor necesario para放置 la capa de cobertura. Ajuste el ancho según sea necesario */
.container {
  position: relative;
  width: 50%;
}
/* Hacer que la imagen sea adaptable */
.image {
  width: 100%;
  height: auto;
}
/* Efecto de superposición (alto y ancho completo) - ubicado en la parte superior del contenedor y sobre la imagen */
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transition: .3s ease;
}
/* Al pasar el ratón sobre el contenedor, el texto de superposición se muestra 'escalado' */
.container:hover .overlay {
  transform: scale(1);
}
/* Algunos textos dentro de la capa de cobertura, alineados vertical y horizontalmente */
.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

Prueba por ti mismo