Прозрачность работает с зависанием, но не с цветом фона. Зачем?

Question

Я хочу создать черный прозрачный оверлей на 4 изображениях, сохраняя размер и, если возможно, добавить текст с зависанием. Я посмотрел предварительные ответы, но это не работает для меня. Начинающий. Не могли бы вы помочь мне ?

HTML

<section class="image"> 

    <img src="images/JOHN.jpg" alt="john" id="John" > 
    <img src="images/CITIES.jpg" alt="cities" id="Cities"> 
    <img src="images/HOMIES.jpg" alt="homies" id="Homies"> 
    <img src="images/HASARD1.jpg" alt="hasard" "Hasard"> 

</section> 

CSS

img { 
    width: 47%; 
    height: auto; 
} 

#John:hover { 
    background: black; 
    ; 
    opacity: 0.7; 
    /* i also tried */ 
    background: rgba(0, 0, 0, 0.7)) 
    /* the only thing that works on it is the opacity */ 
} 

section.image { 
    text-align: center; 
} 

Спасибо

Answer 1

Фоновый вы пытаетесь применить не будут появляться на <img> теги, потому что ваше изображение блокирование это из.

Подумайте о своем теге <img> как многоуровневый элемент, верхний - это ваше фактическое изображение, а под ним находится контейнер, в котором установлен фон. Поскольку ваш образ заполняет весь контейнер, ваш фон никогда не появится.

Вместо этого вы создаете элемент, который отображается поверх вашего изображения, и появляется при наведении указателя мыши.

Для того, чтобы сделать это, вам нужно сначала обернуть <img> тегов с элементом, например:

<a href="#" class="img-link"> 
    <img class="image" src="http://placehold.it/350x150" /> 
</a> 

Я использовал <a> тега, потому что я предполагаю, что вы хотите что-то интерактивное.

Далее мы можем применить некоторый базовый стиль, который вставляет элемент после тега <a> и делает его отображаемым при наведении. В результате получается нечто вроде этого:

.img-link { 
 
    display: inline-block; 
 
    line-height: 0; 
 
    position: relative; 
 
} 
 

 
.img-link:after { 
 
    background: rgba(0,0,0,0.3); 
 
    display: inline-block; 
 
    content: ''; 
 
    height: 100%; 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    transition: opacity 0.2s linear; 
 
} 
 

 
.img-link:hover:after { 
 
    opacity: 1; /* show overlay */ 
 
}

<a href="#" class="img-link"> 
 
    <img class="image" src="http://placehold.it/350x150" /> 
 
</a>

Answer 2

Быстрый Google из «CSS изображения заголовка висения» показывает много ссылок, которые вы найдете полезным :) Возьмите это, например: http://demo.hongkiat.com/css3-image-captions/index.html

В принципе, вы не можете просто сделать это с помощью img. Для создания черного фона вам понадобится дополнительный HTML-код. Например, вот очень простой jsfiddle: https://jsfiddle.net/outfg5ym/

Обратите внимание, как я обмотал IMG внутри DIV:

<div class="black"> 
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg"> 
</div> 

ДИВ создает черный фон позади изображения, а затем при наведении курсора мыши на DIV , непрозрачность изображения отбрасывается.

Answer 3

Вы можете добавить фильтр в изображение, чтобы добиться аналогичного эффекта. Что-то вроде этого:

img:hover { 
-webkit-filter:brightness(70%); 
filter:brightness(70%); 
} 

Пример: https://jsfiddle.net/d6tce9g8/1/

Кроме того, есть много фильтров доступны: https://developer.mozilla.org/en/docs/Web/CSS/filter

Browser поддержка фильтра: http://caniuse.com/#search=filter