Bild & Text bei hover ändern

[Carmen]

Hallo,

ich habe unter dem Punkt "Salon" nochmals etwas geändert http://friseursalon.bplaced.net/

Mein Problem ist allerdiungs noch immer der Text, wie kann ich erreichen dass dieser eingeblendet wird, wenn ich auf das Bild mit der Maus fahre? Wie ich es jetzt habe, muss man genau den Text treffen das ist nicht Sinn der Sache :/

Auch weiß ich nicht, ob das HTML so richtig ist

  
    <span class="carmen">  
      <p class="salonText">Carmen</p>  
	</span>  
    <span class="carmen">  
      <p class="salonText">Carmen</p>  
	</span>  
    <span class="carmen">  
      <p class="salonText">Carmen</p>  
	</span>  

  
.carmen:first-child  {  
	margin-left:1em;  
}  
  
.carmen {  
	background:url(../img/salon/01.jpg) no-repeat;  
	border: 5px solid rgb(210, 181, 91);  
	border-radius: 50%;  
	box-shadow: 0 0 0 0.2em rgba(210, 181, 91, 0.3) inset;  
	width: 13.750em;  
	height: 13.750em;  
	transition: all 0.5s ease-in-out 0s;  
	display:inline-block;  
	margin-right:8em;  
	margin-top:2em  
}  
  
.carmen:last-child {  
	margin-right:0em;  
}  
  
.carmen:hover {  
	box-shadow: 0 0 0 110px rgba(255,255,255, 0.9) inset;  
}  
  
#salon .salonText {  
	position: relative;  
	top: 72px;  
	left: 64px;  
	transition: all 0.8s ease-in-out 0s;  
	font-size:1.375em;  
	color:#222222;  
	opacity: 0;  
}  
#salon .salonText:hover {  
	opacity: 1;  
	transform: scale(1);  
}