Superposition d'image au survol : Améliorez votre site web avec des effets captivants

Introduction

Dans ce laboratoire, nous allons apprendre à créer un effet de superposition d'image au survol à l'aide de CSS. Cet effet ajoute une touche élégante et professionnelle aux images, les rendant plus attrayantes et interactives. En utilisant des pseudo-éléments et des transitions, nous allons créer une superposition fluide et visuellement attrayante qui améliorera l'expérience utilisateur de n'importe quel site web.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Superposition d'image au survol

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour afficher un effet de superposition d'image au survol, suivez ces étapes :

Utilisez les pseudo-éléments ::before et ::after pour les barres supérieure et inférieure de la superposition respectivement. Réglez leur opacité, transform et transition pour produire l'effet souhaité.
Utilisez <figcaption> pour le texte de la superposition. Réglez display: flex, flex-direction: column et justify-content: center pour centrer le texte dans l'image.
Utilisez le pseudo-sélecteur :hover pour mettre à jour l'opacité et la transform de tous les éléments et afficher la superposition.

Voici le code HTML à utiliser :

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

Et voici le code CSS à utiliser :

.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;
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire Superposition d'image au survol. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.