.gallery {
margin: 0 auto;
width: 1366px;
}
.container {
float: left;
position: relative;
height: 300px;
}
.container img {
border: 1px solid gray;
}
.container span {
display: none;
position: absolute;
left: 140px;
top: 125px;
color: white;
}
.container:hover .dropdown {
display: block;
}
.container img:hover {
background-color: black;
z-index: 1;
}
<div class="gallery">
<div class="container">
<img class="img" src="" width="337" height="300">
<span class="pe-7s-look pe-3x dropdown"></span>
</div>
<div class="container">
<img src="http://via.placeholder.com/337x300" width="337" height="300">
<span class="pe-7s-look pe-3x dropdown"></span>
</div>
<div class="container">
<img src="http://via.placeholder.com/337x300" width="337" height="300">
<span class="pe-7s-look pe-3x dropdown"> </span>
</div>
<div class="container">
<img src="http://via.placeholder.com/337x300" width="337" height="300">
<span class="pe-7s-look pe-3x dropdown"></span>
</div>
<div class="container">
<img src="http://via.placeholder.com/337x300" width="337" height="300">
<span class="pe-7s-look pe-3x dropdown"></span>
</div>
<div class="container">
<img src="http://via.placeholder.com/337x300" width="337" height="300">
<span class="pe-7s-look pe-3x dropdown"></span>
</div>
<div class="container">
<img src="http://via.placeholder.com/337x300" width="337" height="300">
<span class="pe-7s-look pe-3x dropdown"></span>
</div>
<div class="container">
<img src="http://via.placeholder.com/337x300" width="337" height="300">
<span class="pe-7s-look pe-3x dropdown"></span>
</div>
<div class="load-more">Load more works</div>
</div>
Почему при hover на изображение Цвет фона не меняется?