Fading out/color overlay on background image - html

Question

I have replicated a demo of my problem but solution to a relatively simple problem:
Fiddle
I have four circular divs each with a unique background image (That is why the bg image is inline) but I wish to fade out or overlay the image with a colour and ensure the text dosnt fade out but retains its full opacity.
I have tried numerous things such as simply just changing the opacity on the hover etc but struggling here.
<div class="faces-container">
<div class="faces" style="background-image: url('http://i.huffpost.com/gen/1697767/thumbs/o-GAME-OF-THRONES-facebook.jpg');">
<span class="name">Dan</span>
</div>
</div>
.faces-container{
height: auto;
overflow: auto;
text-align: center;
margin: 0;
box-sizing: border-box;
padding: 20px 20px;
display: inline-block;
-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 3s; /* Firefox < 16 */
-ms-animation: fadein 3s; /* Internet Explorer */
-o-animation: fadein 3s; /* Opera < 12.1 */
animation: fadein 3s;
}
.faces{
border-radius: 200px;
height: 200px;
width: 200px;
background-size: cover;
-webkit-transition : all 500ms ease-out;
-moz-transition : all 500ms ease-out;
-o-transition : all 500ms ease-out;
transition : all 500ms ease-out;
color: transparent;
line-height: 200px;
font-size: 2.5em;
}
.faces:hover{
cursor: pointer;
-moz-box-shadow: 0px 0px 10px 5px #aaa;
-webkit-box-shadow: 0px 0px 10px 5px #aaa;
box-shadow: 0px 0px 10px 5px #aaa;
color: #F7CA18;
}

Answer 1

JSFiddle
I removed your inline background-image for the .faces and replaced it with
background-image: linear-gradient( rgba(0,0,0,0.7), rgba(0,0,0,0.7) ), url('http://i.huffpost.com/gen/1697767/thumbs/o-GAME-OF-THRONES-facebook.jpg');
on your .faces class.
I didn't get the point about /unique/ name and inline style declaration. This makes no sense. You can just have it like that:
<div class="faces face-1"></div> and then face-2 and etc, where all the common styles for the elements will be stored in faces, and the hover state will be handeled in faces-x and faces-2.

Answer 2

Example
.faces:hover > span.name{
opacity: 0.5
}

Answer 3

Change your code to this
.faces-container,.faces,.name{transition : all 500ms ease-out;box-sizing: border-box}
.faces-container{
height: auto;
text-align: center;
margin: 0;
padding: 20px 20px;
display: inline-block;
animation: fadein 3s;
height: 200px;
width: 200px;
position: relative
}
.faces{
border-radius: 200px;
height: 100%;
width: 100%;
background-size: cover;
transition : all 500ms ease-out;
color: transparent;
line-height: 200px;
font-size: 2.5em;
position: absolute;
left: 0;
top: 0
}
.name{
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%,0,0)
}
.faces-container:hover .faces{
box-shadow: 0px 0px 10px 5px #aaa;
z-index: 1;
opacity: 0
}
.faces-container:hover .name{
cursor: pointer;
color: #F7CA18;
z-index: 2;
opacity: 1
}
<div class="faces-container">
<div class="faces" style="background-image: url('http://i.huffpost.com/gen/1697767/thumbs/o-GAME-OF-THRONES-facebook.jpg');"></div>
<span class="name">Dan</span>
</div>