Update - figure & figcaption

[Carmen]

Hallo,

so würde mein Effekt wieder funktionieren

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

  
figcaption {  
	text-align: center;  
	padding-top: 80px;  
	opacity: 0;  
	transition: all 0.8s ease-in-out 0s;  
}  
  
figcaption:hover {  
	opacity: 1;  
}  
.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: 2em 8em 1.875em 0;  
	display:inline-block;  
	cursor:pointer;  
}  
  
.salonImage:last-child {  
		margin: 2em 0em 1.875em 0;  
}  
  
.salonImage:first-child {  
		margin: 2em 8em 1.875em 2em;  
}  
  
.salonImage:hover {  
	box-shadow: 0 0 0 6.875em rgba(255,255,255, 0.9) inset;  
}  

Wenn ich figure richtig verstanden habe, darf dieses allersings kein "background-image" haben? Wenn dieses stimmt, bleibt mir nichts anderes übring als <span><p></p></span> zu nehmen, wie hier schon gewschrieben.