выведение/цвет наложение на фоновом изображении

Question

я копировал демонстрацию моей проблемы, но решения для относительно простой задачи:

Fiddle

У меня есть четыре круглых див каждых с уникальным фоновым изображением (то есть почему изображение bg является встроенным), но я хочу ослабить или наложить изображение с цветом и обеспечить, чтобы текст dosnt исчезал, но сохраняет свою полную непрозрачность.

Я пробовал множество вещей, таких как просто изменение прозрачности на зависании и т. Д., Но здесь изо всех сил.

<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 Отключив встроенный background-image для .faces и заменил его

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'); 

на вашем .faces классе.

Я не получил смысла в объявлении стиля/уникального/имени и встроенного стиля. Это не имеет никакого смысла. Вы можете просто это так:

<div class="faces face-1"></div>, а затем face-2 и т.д., где все общие стили для элементов будут сохранены в faces, и состояние парения будет handeled в faces-x и faces-2.

Answer 2

Пример

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

Answer 3

Изменить код для этого

.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"> 
 
    \t <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>