Bild & Text bei hover ändern

[Carmen]

So, ich glaube ich habe es

  
<div class="salonImage" style="background-image: url(img/salon/01.jpg)"><h4>Carmen</h4></div>  

  
.salonImage {  
	border: 5px solid rgb(210, 181, 91);  
	border-radius: 50%;  
	box-shadow: 0 0 0 0.313em 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;  
}  
  
.salonImage:hover {  
	box-shadow: 0 0 0 6.875em rgba(255,255,255, 0.9) inset;  
}  
  
.salonImage:hover h4 {  
	opacity: 1;  
	transform: scale(1);  
}  
  
.salonImage h4 {  
	text-align: center;  
	padding-top: 80px;  
	opacity: 0;  
	transform: scale(0);  
	transition: all 0.8s ease-in-out 0s;  
}  

Es geht nun so, wenn ich mein Bild direkt in das HTMl als Background einbinde. Finde ich zwar irgendwie schade, aber ich teste es jetzt seit einigen Stunden, irgendwann verliere ich auch die Lust und die Gedult daran.