[Résolu] Hover: background-texts à la place de l'image

bonjour,
je suis en formation de webdesigner.
je voudrais qu'un background avec texte prenne la place de l'image quand la souris passe dessus.
après quelques heures de recherches , j'arrive pas à trouver la solution,

MERCI D'AVANCE,

voici mon site:
http://www.pyroma4.myhostpoint.ch

voilà mon code:
HTML

<div class="images"> <!--DEBUT DIV IMAGES-->
              <figure><a href="images/flyers/amazing_heroes_hover.jpg"><img src="images/flyers/amazing_heroes.jpg"></a><figcaption>texte</figcaption></figure>
          	</div><!--END DIV  IMAGES-->

CSS

.images {
	display:block;
	clear:left;
	
}

figure{
	position:relative;
	display:block;
	width:159px;
	height:89px;
	float:left;
	margin:25px 26px 0 0;
}

figure figcaption {
	position:absolute;
	visibility:hidden;
	width:159px;
	height:89px;
	top:0;
	left:0;
	text-align:center;
	background:#F50D10;
}

figure figcaption:hover{
	visibility:visible;
}

MERCI

salut,
plutôt

figure:hover figcaption {}

À noter juste que ton code est très mauvais pour l'accessibilité. D'abord tu oublies de spécifier un attribut "alt" pour l'img (et vu qu'il n'y a qu'une <img> dans un <a>, l'attribut "alt' ne doit pas être vide) et tu utilises un "visibility:hidden" qui n'est pas franchement top. Tu pourrais passer à la place par "opacity".
Et puis pour parler de tout, cela ne sert à rien de mettre un "display:block" sur <figure> vu qu'il est déjà de type bloc (surtout que tu utilises par la suite un "float:left").

merci je vais essayer,

punaise ça marche !!!
merci

tu m'as fais économiser encore quelques heures de boulot.

par rapport alt, j'allais le mettre, mais j'étais tellement focaliser sur le hover, que j'ai oublié de le mettre.

bon week-end