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égende en haut</span>
</li>
<li class="legend-top">
<img alt="landscape002.jpg" src="landscape002.jpg" />
<span>Légende en haut</span>
</li>
<li class="legend-bottom">
<img alt="landscape003.jpg" src="landscape003.jpg" />
<span>Légende en bas</span>
</li>
<li class="legend-bottom">
<img alt="landscape004.jpg" src="landscape004.jpg" />
<span>Lé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.