WebNioub

On n’a souvent pas beaucoup de place pour les légendes des images de notre site internet. Ce n’est pourtant pas une raison pour les négliger. C’est pourquoi il existe un moyen très simple en CSS de créer des légendes en transparence par dessus des images !

Comment faire ?

1) Préparer une image

D’une taille exemple de 300 x 200 pixels, nommée “1.jpg”, et se trouvant dans un dossier appelé “img”.

2) Intégrer le code CSS suivant :

Css :

.legend-bloc {
	width:300px;/*idem largeur de l'image*/
	height:200px;/*idem hauteur de l'image*/
	display:block;
	position:relative;
	margin:auto;
	}
 
.legend-bloc p{
	position:absolute;/*element est pris en compte dans l'espace du contenu*/
	background-color:#FFF;/*couleur du fond de la légende*/
	filter:alpha(opacity=70);/*transparence du fond de la légende*/
	opacity:0.7;/*transparence du fond de la légende*/
	text-align:center;/*alignement du texte de la légende*/
	width:300px;/*largeur du fond de la légende*/
	height:20px;/*hauteur du fond de la légende sur 1 ligne*/
	color:#000;/*couleur du texte de la légende*/
	bottom:0px;
	left:0px;
	margin:0px;
}
 
.legend-bloc:hover p{
	position:absolute;/*element est pris en compte dans l'espace du contenu*/
	background-color:#FFF;/*couleur du fond de la légende*/
	filter:alpha(opacity=70);/*transparence du fond de la légende*/
	opacity:0.7;/*transparence du fond de la légende*/
	text-align:center;/*alignement du texte de la légende*/
	width:290px;/*idem largeur de l'image pour le fond de la légende – l'espace intérieur*/
	height:190px;/*idem hauteur de l'image pour le fond de la légende – l'espace intérieur*/
	color:#000;/*couleur du texte de la légende*/
	/*margin:0 0 0 -300px;position du fond de la légende par rapport à l'image*/
	padding:5px;/*espace intérieur de la légende*/
	top:0px;
	left:0px;
	margin:0px;
}
 
.legend-bloc strong {
	height:20px;
	}
 
.clear { clear:both; }

3) Et voici le code html de l’image légendée

Html :

<a class="legend-bloc"><img src="1.jpg" alt="" />
 
<strong>La tour Eiffel - Paris - FRANCE</strong>
 
Initialement nommée tour de 300 mètres, faite de fer puddlé construite par Gustave Eiffel et ses collaborateurs en 1889. Située à l'extrémité du Champ-de-Mars, en bordure de la Seine, ce monument parisien, symbole de la France et de sa capitale est le 9ème site le plus visité du pays en 2006 et le premier monument payant visité au monde avec 6,9 millions de visiteurs en 2007.
 
</a>