Créer un texte apparaissant au survol

Nous avons déjà vu comment créer un élément qui s'affiche au survol de la souris sur une image, mais voici dans cet article comment afficher tout un tas d'informations et ce de manière très fluide en passant la souris sur un élément ! 

L'ensemble de ce tutoriel est également disponible sur notre compte Instagram.

 

1ère étape

Le code HTML.

<div class='card'>
  <div class='info'>
    <h1 class='title'>Tokyo</h1>
    <p class='description'>Capitale animée du Japon, Tokyo associe les styles ultramodernes et traditionnels, dans un mélange de gratte-ciel aux néons lumineux et de temples anciens. Le somptueux Meiji-jingū est un sanctuaire shinto réputé pour son entrée imposante et les bois qui l'environnent. Le palais impérial est entouré de vastes jardins publics. Les nombreux musées de la ville proposent des expositions allant de l'art classique, au musée national de Tokyo, à un théâtre kabuki reconstruit, au musée d'Edo-Tokyo.</p>
  </div>
</div>

 

2ème étape

Stylisons maintenant la carte.

.card {
  border-radius: 16px;
  margin: 0 auto;
  width: 500px;
  max-width: 100%;
  min-height: 500px;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  background-image: url(https://cdn.pixabay.com/photo/2019/04/20/11/39/japan-4141578_960_720.jpg);
  background-size: cover;
}

 

3ème étape

Attaquons-nous au div contenant les informations.

.info {
  position: relative;
  width: 100%;
  height: 500px;
  background-color: #fff;
  transform: translateY(100%)
    translateY(-88px)
    translateZ(0);
  transition: transform 0.3s ease-out;
}

 

4ème étape

Ajoutons un background au div contenant les informations.

.info:before {
  z-index: -1;
  display: block; position: absolute;
  content: ' ';
  width: 100%; height: 100%;
  overflow: hidden;
  background-image: url(https://cdn.pixabay.com/photo/2019/04/20/11/39/japan-4141578_960_720.jpg);
  filter: blur(10px);
  background-size: cover;
  opacity: 0.25;
  transform: translateY(-100%)
    translateY(88px)
    translateZ(0);
  transition: transform 0.3s ease-out;
}

Ici nous stylisons le background du div avec les informations en utilisant :before.

Ceci va nous permettre d'ajouter un fond qui occupe toute la hauteur et toute la largeur de la div, tout en nous donnant la possibilité de le flouter avec le filtre blur.

 

5ème étape

Stylisons le titre et la description.

.title {
  margin: 0;
  padding: 24px;
  font-size: 40px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.87);
}

.description {
  margin: 0;
  padding: 0 24px 24px;
  font-size: 18px;
  line-height: 1.5;
}

 

6ème étape

Il nous suffit de détecter le survol de la carte pour terminer ce code !

.card:hover .info,
.card:hover .info:before {
  transform: translateY(0) translateZ(0);
}
Partagez cet article