Superposición de imágenes al pasar el cursor por encima: Eleva tu sitio web con efectos cautivadores

Introducción

En este laboratorio, aprenderemos cómo crear un efecto de superposición de imágenes al pasar el cursor por encima utilizando CSS. Este efecto agrega un toque elegante y profesional a las imágenes, haciéndolas más atractivas e interactivas. Al utilizar pseudo-elementos y transiciones, crearemos una superposición suave y visualmente atractiva que mejorará la experiencia del usuario de cualquier sitio web.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 100%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Superposición de imágenes al pasar el cursor por encima

index.html y style.css ya se han proporcionado en la VM.

Para mostrar un efecto de superposición de imágenes al pasar el cursor por encima, siga estos pasos:

Utilice los pseudo-elementos ::before y ::after para las barras superior e inferior de la superposición respectivamente. Establezca su opacidad, transform y transición para producir el efecto deseado.
Utilice <figcaption> para el texto de la superposición. Establezca display: flex, flex-direction: column y justify-content: center para centrar el texto en la imagen.
Utilice el pseudo-seleccionador :hover para actualizar la opacidad y transform de todos los elementos y mostrar la superposición.

Aquí está el código HTML a utilizar:

<figure class="hover-img">
  <img src="https://picsum.photos/id/200/440/320.jpg" />
  <figcaption>
    <h3>Lorem <br />Ipsum</h3>
  </figcaption>
</figure>

Y aquí está el código CSS a utilizar:

.hover-img {
  display: inline-block;
  margin: 8px;
  width: 100%;
  max-width: 320px;
  min-width: 240px;
  overflow: hidden;
  position: relative;
  text-align: center;
  background-color: #000;
  color: #fff;
}

.hover-img * {
  box-sizing: border-box;
  transition: all 0.45s ease;
}

.hover-img::before,
.hover-img::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  border-top: 32px solid rgba(0, 0, 0, 0.5);
  border-bottom: 32px solid rgba(0, 0, 0, 0.5);
  z-index: 1;
  opacity: 0;
  transform: scaleY(2);
  transition: all 0.3s ease;
}

.hover-img::before {
  content: "";
  top: 0;
  bottom: auto;
}

.hover-img img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
}

.hover-img figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1em;
  opacity: 0;
  z-index: 2;
  transition-delay: 0.1s;
  font-size: 24px;
  font-family: sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hover-img:hover::before,
.hover-img:hover::after {
  transform: scale(1);
  opacity: 1;
}

.hover-img:hover img {
  opacity: 0.7;
}

.hover-img:hover figcaption {
  opacity: 1;
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio de Superposición de imágenes al pasar el cursor por encima. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.