Comment Afficher un Texte Animé Sur une Image en Survol en Utilisant Uniquement CSS3

Il est possible de créer un texte animé sur une image passée en survol en utilisant uniquement CSS.

Si vous voulez passer la souris sur l'image et voir le texte qui apparaît avec animation, alors vous êtes à la bonne place! Voyons comment le faire pas à pas.

1. Créez HTML

  1. Ajoutez votre image en utilisant la balise <img> et le texte.
    2. Premièrement, vous devez ajouter votre image en utilisant la balise <img>. Dans une autre balise <div> vous devez insérer votre texte que vous allez mettre en survol. 
<h2>Texte animé sur une image décolorée en survol</h2>
<div class="example">
  <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" 
    width="300" height="300" alt="tree" />
  <div class="content">
    <div class="text">Arbre</div>
  </div>
</div>

2. Créez CSS

  • Définissez le sélecteur :hover. L'effet de survol est défini en utilisant la pseudo-classe :hover qui sélectionne et style l'élément.
  • Définissez la propriété opacity. La première propriété vous devez définir est la propriété opacity qui spécifie le niveau de la transparence d'un élément. Cela va masquer chaque élément dans la classe au début.
  • Définissez les propriétés transition. La propriété suivante qui doit être définie est la propriété transition qui change les valeurs de l'éléments en millisecondes.
  • Il y a aussi les propriétés transition-delay et transition-duration, dont la première spécifie le procès de début et la deuxième spécifie le temps pris du texte pour déplacer d'en haut à bas.
.example {
  position: relative;
  padding: 0;
  width: 300px;
  display: block;
  cursor: pointer;
  overflow: hidden;
}
.content {
  opacity: 0;
  font-size: 40px;
  position: absolute;
  top: 0;
  left: 0;
  color: #1c87c9;
  background-color: rgba(200, 200, 200, 0.5);
  width: 300px;
  height: 300px;
  -webkit-transition: all 400ms ease-out;
  -moz-transition: all 400ms ease-out;
  -o-transition: all 400ms ease-out;
  -ms-transition: all 400ms ease-out;
  transition: all 400ms ease-out;
  text-align: center;
}
.example .content:hover {
  opacity: 1;
}
.example .content .text {
  height: 0;
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 0.4s;
}
.example .content:hover .text {
  opacity: 1;
  transform: translateY(250px);
  -webkit-transform: translateY(250px);
}

Prenons les mesures avec cet exemple:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .example {
        position: relative;
        padding: 0;
        width: 300px;
        display: block;
        cursor: pointer;
        overflow: hidden;
      }
      .content {
        opacity: 0;
        font-size: 40px;
        position: absolute;
        top: 0;
        left: 0;
        color: #1c87c9;
        background-color: rgba(200, 200, 200, 0.5);
        width: 300px;
        height: 300px;
        -webkit-transition: all 400ms ease-out;
        -moz-transition: all 400ms ease-out;
        -o-transition: all 400ms ease-out;
        -ms-transition: all 400ms ease-out;
        transition: all 400ms ease-out;
        text-align: center;
      }
      .example .content:hover {
        opacity: 1;
      }
      .example .content .text {
        height: 0;
        opacity: 1;
        transition-delay: 0s;
        transition-duration: 0.4s;
      }
      .example .content:hover .text {
        opacity: 1;
        transform: translateY(250px);
        -webkit-transform: translateY(250px);
      }
    </style>
  </head>
  <body>
    <h2>Texte animé sur une image passée en survol</h2>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" width="300" height="300" alt="tree" />
      <div class="content">
        <div class="text">Arbre</div>
      </div>
    </div>
  </body>
</html>
Si vous définissez la propriété text-align à "left" ou "right", le texte apparaîtra de haut en bas à gauche et à droite, respectivement.

Voyons un autre exemple dans lequel le texte va de bas à centre:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .example {
        cursor: pointer;
        height: 300px;
        position: relative;
        overflow: hidden;
        width: 400px;
        text-align: center;
      }
      .example .fadedbox {
        background-color: #666666;
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        -ms-transition: all 300ms ease-out;
        transition: all 300ms ease-out;
        opacity: 0;
        width: 360px;
        height: 100px;
        padding: 130px 20px;
      }
      .example:hover .fadedbox {
        opacity: 0.8;
      }
      .example .text {
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        -ms-transition: all 300ms ease-out;
        transition: all 300ms ease-out;
        transform: translateY(30px);
        -webkit-transform: translateY(30px);
      }
      .example .title {
        font-size: 2.5em;
        text-transform: uppercase;
        opacity: 0;
        transition-delay: 0.2s;
        transition-duration: 0.3s;
      }
      .example:hover .title,
      .example:focus .title {
        opacity: 1;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
      }
    </style>
  </head>
  <body>
    <h2>Texte animé sur une image passée en survol</h2>
    <div class="example">
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="tile3" width="400" height="300" alt="house" />
      <div class="fadedbox">
        <div class="title text">Maison</div>
      </div>
    </div>
  </body>
</html>
Pour la compatibilité maximum des navigateurs, les extensions telles que -webkit- pour Safari, Google Chrome, et Opera (plus nouvelles versions), -moz- pour Firefox, -o- pour les versions plus anciennes d'Opera, -ms- sont utilisées avec les propriétés transition et transform.