Styliser les légendes de vos images avec CSS 3

Styliser les légendes de vos images avec CSS 3

Lorsque l’on affiche des images sur un site, il est toujours utile d’ajouter divers informations (source, lieu…) pour le visiteur.

Mais comment ajouter une légende aux photos sans surcharger l’interface ?

Le but de cet article sera de réaliser un effet similaire à celui-ci : http://thirdroute.com/projects/captify/.

Et encore une fois, CSS 3 va nous aider à mettre en place ce que nous souhaitons, sans JavaScript.

Mise en place du document HTML

Comme à l’accoutumée, nous commençons par le code HTML.

<ul id="pictures">
  <li class="legend-top">
    <img alt="landscape001.jpg" src="landscape001.jpg" />
    <span>L&eacute;gende en haut</span>
  </li>
  <li class="legend-top">
    <img alt="landscape002.jpg" src="landscape002.jpg" />
    <span>L&eacute;gende en haut</span>
  </li>
  <li class="legend-bottom">
    <img alt="landscape003.jpg" src="landscape003.jpg" />
    <span>L&eacute;gende en bas</span>
  </li>
  <li class="legend-bottom">
    <img alt="landscape004.jpg" src="landscape004.jpg" />
    <span>L&eacute;gende en bas</span>
  </li>
</ul>

Il s’agit d’une simple liste contenant les images <img /> et les légendes <span />.

Pour chaque image, nous précisons si la légende sera afficher en bas (classe legend-bottom) ou en haut (classe legend-top).

Style de la liste

D’abord, le style de la liste.

#pictures {
  list-style: none outside none;
  margin: 0 auto;
  padding: 0;
  width: 640px; /* Nous affichons les images sur 2 colonne, la largeur est égale à 2 fois la largeur pour chaque image */
}

#pictures li {
  border: 5px solid #fff; /* Ajout d'une bordure blanche */
  float: left;
  height: 225px; /* Hauteur de l'image */
  margin: 5px;
  overflow: hidden;
  position: relative;
  width: 300px; /* Largeur de l'image */
}

Style de éléments

Nous mettons maintenant en place le style pour chaque élément de la liste :

#pictures li img {
  z-index: 10;
}

#pictures li span {
  background: rgba(0, 0, 0, 0.5); /* Les légendes auront un arrière-plan noir avec une opacité de 50% */
  color: #fff;
  display: block;
  font-weight: bold;
  height: 30px;
  left: 0;
  line-height: 30px;
  padding: 5px 10px;
  position: absolute;
  text-shadow: 2px 2px #333;
  width: 280px;
  z-index: 20;
}

Comme vous pouvez le remarquer, nous utilisons une propriété de CSS 3 pour définir la couleur d’arrière-plan.

Pour plus de détails, vous pouvez vous référer au site du W3C : http://www.w3.org/TR/2008/WD-css3-color-20080721/#rgba-color.

Nous ajoutons aussi un effet d’ombre sur le texte avec la propriété text-shadow : http://www.w3.org/TR/css3-text/#text-shadow.

Il faut maintenant mettre en place les styles spécifiques pour les légendes du bas et du haut.

#pictures li.legend-bottom span {
  border-top: 10px solid rgba(255, 255, 255, 0.2);
  bottom: -50px;
  transition: bottom 0.3s ease-in-out;
  -moz-transition: bottom 0.3s ease-in-out;
  -o-transition: bottom 0.3s ease-in-out;
  -webkit-transition: bottom 0.3s ease-in-out;
}

#pictures li.legend-bottom:hover span {
  bottom: 0;
}

#pictures li.legend-top span {
  border-bottom: 10px solid rgba(255, 255, 255, 0.2);
  top: -50px;
  transition: top 0.3s ease-in-out;
  -moz-transition: top 0.3s ease-in-out;
  -o-transition: top 0.3s ease-in-out;
  -webkit-transition: top 0.3s ease-in-out;
}

#pictures li.legend-top:hover span {
  top: 0;
}

Nous définissons les positions pour les légendes ainsi que les transitions pour l’affichage.

Les informations sur la propriété transition sont regroupées sur cette page : http://www.w3.org/TR/css3-transitions/.

Vous pouvez voir le résultat sur la démo en ligne.

Démo