Overlay a color and opacity to a background image

overlay-color-div.css

.box {
  width:350px;
  height:150px;
}

.fade {
  position: relative;
}

.fade:after {
  background-color: red;
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.fade:hover:after  {
  opacity: .5;
}