<div class="module red"></div>
<div class="module yellow"></div>
<br style="clear: both;">
<div class="module blue"></div>
<div class="module green"></div>
.module {
  margin: 10px;
  width: 200px;
  height: 150px;
  float: left;
  background-size: cover;
}
.red {
  background-image: 
    linear-gradient(
      rgba(255, 0, 0, 0.5),
      rgba(255, 0, 0, 0.5)
    ),
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/shoes.jpg);
}
.red {
  background-image: 
    linear-gradient(
      rgba(255, 0, 0, 0.5),
      rgba(255, 0, 0, 0.5)
    ),
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/shoes.jpg);
}
.yellow {
  background-image: 
    linear-gradient(
      rgba(255, 215, 15, 0.5),
      rgba(255, 215, 15, 0.5)
    ),
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/shoes.jpg);
}
.blue {
  background-image: 
    linear-gradient(
      rgba(0, 15, 200, 0.5),
      rgba(0, 15, 200, 0.5)
    ),
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/shoes.jpg);
}
.green {
  background-image: 
    linear-gradient(
      rgba(0, 215, 15, 0.5),
      rgba(0, 215, 15, 0.5)
    ),
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/shoes.jpg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.