Bild & Text bei hover ändern

[Carmen]

Guten Abend,

auf meiner Seite http://friseursalon.bplaced.net/ unter dem Punkt "Salon" gibt es drei Bilder, die sind so eingebunden:

  
    <figure>  
      <img src="img/salon/01.jpg" alt="" class="salonImage">  
      <figcaption class="salonText">Carmen</figcaption>  
	</figure>  
    <figure>  
      <img src="img/salon/01.jpg" alt="" class="salonImage">  
      <figcaption class="salonText">Carmen</figcaption>  
	</figure>  
    <figure>  
      <img src="img/salon/01.jpg" alt="" class="salonImage">  
      <figcaption class="salonText">Carmen</figcaption>  
	</figure>  

Das dazugehörige CSS

  
#salon figure {  
	width:14em;  
	display:inline-block;  
	margin-right:4.7em;  
}  
  
#salon figure:last-child {  
	margin-right:0em;  
}  
  
#salon .salonImage {  
	border: 5px solid rgb(210, 181, 91);  
	border-radius: 50%;  
	box-shadow: 0 0 0 0.625em rgba(210, 181, 91, 0.3) inset;  
	width: 13.750em;  
	height: 13.750em;  
	transition: all 0.5s ease-in-out 0s;  
	margin: 1.250em auto 1.875em;  
	position:absolute;  
}  
  
#salon .salonText {  
	position: relative;  
	top: 120px;  
	left: 72px;  
	transition: all 0.8s ease-in-out 0s;  
	font-size:1.375em;  
	color:#222222;  
	opacity: 0;  
}  
#salon .salonText:hover {  
	opacity: 1;  
	transform: scale(1);  
}  

Nun möchte ich gerne wenn ich mit der Maus auf das Bild fahre der Text erscheint und gleichzeig sollte das Bild leicht durchsichtig werden also ein weiße Farbe bekommen, wie könnte ich das am besten anstellen?