Sur le web, cela arrive souvent qu'on ait envie d'afficher du texte sur une image. Que ce soit la légende d'une photo dans un article ou à la une d'un site, avec le titre des articles affichés par dessus les vignettes d'illustration (comme sur la page d'accueil de ce blog).

Cela se fait très simplement en utilisant les positionnements relatifs et absolus.
Voilà l'HTML :

<div class="container">
	<img src="https://placekitten.com/g/320/240" alt="Kitten !" />
	<div class="caption">
		Sleepy Kitten !
	</div>
</div>

Et le CSS :

.container {
	position: relative;
    width: 320px;
    height: 240px;
}

.container .caption {
	position: absolute;
    bottom: 0;
    left: 0;
}

Le résultat, avec un chouïa de code en plus pour styliser le texte :

Le genre de bout de code dont on ne peut pas se passer.

---

css | html

Si vous avez aimez :  

Twitter Facebook Google+

---