Как добавить наложение цвета поверх изображения с помощью CSS

Question

если у меня есть такое изображение:

<img src="inshot1.jpg" width="100px" height="100px">​​​​​​​

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

Answer 1

Вот два способа сделать это - оба включают обертывание изображения в содержащий элемент.

Использование фона контейнера

Вы можете установить красный цвет фона содержащего элемента и затем уменьшить непрозрачность изображений при наведении:

HTMLвыглядит следующим образом:

<!-- Uses background color to fade color from behind. -->
<div id="background">
    <img src="http://lorempixel.com/100/100/food" height="100" width="100" />
</div>

И CSS выглядит следующим образом:

div { position: relative; float: left; }
img { display: block; }

#background { background: red; }
#background:hover img { opacity: 0.5; }

Использование элемента-брата

Вы можете вкладывать пустойspan и использовать его как абсолютно позиционированный брат, который может служить наложением.Проверьте это - вот HTML:

<!-- Uses empty span to overlay color. -->
<div id="overlay">
    <img src="http://lorempixel.com/100/100/food" height="100" width="100" />
    <span></span>
<div>​

И CSS будет выглядеть так:

div { position: relative; float: left; }
img { display: block; }

#overlay span {
    background: red;
    bottom: 0;
    display: block;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

#overlay:hover span { opacity: 0.5; }

Вы можете попробовать демо каждого решения здесь:

http://jsfiddle.net/jimjeffers/mG78d/1/

Возможные ошибки

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

1. Плавающий содержащий элемент.
2. Абсолютно позиционировать содержащий элемент.
3. Установите отображение содержащего элемента: inline-block.
4. Явно установите высоту и ширину содержащего элемента в соответствии с размерами изображения.

В моем примере с jsfiddle я установил для divs значение float: left;.

Answer 2

Это можно сделать несколькими способами, но вы можете просто обернуть его в <div> с помощью background-color и установить visibility: hidden на изображении в :hover

div { 
  background: red; 
  display: inline-block; 
}

img { 
  display: block; 
}

div:hover img { 
  visibility: hidden; 
}

<div>
  <img src="https://via.placeholder.com/350x150">
</div>