Background image with color overlay

by firegroove

HTML

<div class="block block_1">
  <h3>Normal overlay</h3>
</div>
<div class="block block_2">
  <h3>Overlay on hover</h3>
</div>

CSS

.block {
  float: left;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.block h3{
  color:#fff;
  position:relative;
  z-index:1;
}
.block_1 {
  background: url(https://static.pexels.com/photos/128458/pexels-photo-128458-tiny.jpeg) no-repeat 0, 0;
  height: 200px;
  width: 280px;
  position: relative;
}

.block_1:after {
  position: absolute;
  content: " ";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: rgba(255, 0, 0, 0.5);
}

.block_2 {
  background: url(https://static.pexels.com/photos/128458/pexels-photo-128458-tiny.jpeg) no-repeat 0, 0;
  height: 200px;
  width: 280px;
  position: relative;
}

.block_2:after {
  position: absolute;
  content: " ";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: rgba(0, 0, 0, 0.1);
  display: none;
}

.block_2:hover:after {
  display: block;
}