CSS : Ajouter du texte sur une image

C'est la tendance actuelle de superposer la légende par dessus son image. Certains incrustent le texte dans l'image, mais ce n'est pas toujours très joli, et on ne peut plus changer le texte facilement. D'autres utilisent du javascript. Mais on peut très bien le réaliser avec un simple code CSS.

Pour commencer, créer un conteneur, un <div class="boite">. Ensuite, on y place l'image et le texte dans son propre <div class="legende"> et on ferme le conteneur. Le code complet se trouve en bas de page.

Placement
Pour placer le texte par dessus l'image, il est nécessaire de comprendre le positionnement des éléments. Nous voulons placer le texte par rapport à la position de l'image. Pour cela, nous allons utiliser l'attribut position:absolute sur le conteneur "legende". Ceci le place par rapport au premier parent que n'est pas positionné de manière statique (comme tout élément sans attribut position). Donc "boite" prendra la position:relative qui ne change rien à sa position mais permet de positionner le texte. Ensuite, il suffit de mettre la valeur bottom: 0 sur "legende" afin de le placer tout en bas du cadre "boite" (si "boite" n'avait pas de positionnement, notre légende se trouverait en bas de la fenêtre).

Transparence
Pour que le texte soit lisible, il serait intéressant d'ajouter un fond gris clair sous le texte uniquement. Mais avec un peu de transparence pour ne pas couper l'image complètement, sinon il suffirait de couper l'image et de mettre le texte en dessous. Pour cela, il faut utiliser la déclaration de couleur en rgb avec alpha, soit rgba(). Avec les valeurs background-color: rgba(200, 200, 200, 0.85) on obtient un joli fond gris clair viisble à 85%.

Apparition au survol
Les choses se compliquent un peu, car nous voulons maintenant voir le texte uniquement au survol de la souris, pour pouvoir voir l'image entière le reste du temps. On peut utiliser les propriétés opacity et display, mais ici nous utiliserons opacity car il permet des transitions. Il suffira ensuite de déclarer sur opacity:0 pour "legende" (invisible par défaut) et opacity:1 sur le survol. Pour le survol, on peut déclarer la propriété d'un enfant en utilisant le survol du parent. Il suffit de déclarer opacity:1 sur l'élément :
.boite:hover .legende

Effet de transition
On a déjà établi la transition en elle-même, maintenant on doit déclarer les réglages de la transition directement dans le CSS de l'élément qui le subira. Donc dans .legend on mettra la suivante :
-webkit-transition: opacity .5s ease;
transition: opacity .5s ease;
La répétition avec -webkit- est nécessaire à chaque fois pour la compatibilité avec Safari. On déclare que quand on change l'opacité, la transition dure 0,5 secondes, et se passe de manière "ease" (valeur par défaut, mais il est prudent de le préciser), qui commence la transition doucement, accélère, puis ralentit à la fin pour donner une légère "inertie" a la transition.

J'ai volontairement omis toute mise en forme, pour ne pas compliquer les choses, mais il est évident qu'il faudra mettre les margin/padding à zéro pour la boite, rajouter de l'espace autour du texte, etc...

Pour résumer, voici le code fini :

HTML

<div class="boite">
      <img rel="lightbox" src="foreverchat.jpg">
      <div class="legende">Voici notre image exemple</div>
</div

CSS

.boite {
      position: relative;
      }

.legende {
      position: absolute;
      bottom: 0;
      background-color: rgba(200, 200, 200, 0.85);
      opacity: 0;
      -webkit-transition: opacity .5s ease;
      transition: opacity .5s ease;
      }

.boite:hover .legende {
      opacity:1;
      }