{Benjamin PREVOT}

Styliser les légendes de vos images avec CSS 3

29 avril 2010 Web 1 commentaire

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
Les avatars utilisés proviennent du site Gravatar. Pour créer un compte, vous pouvez vous inscrire.
* Champs obligatoires