CSS: How to create image overlays?

With a little CSS, you can easily create colored overlays over images. For this, the corresponding image only has to be within a div.

.card-overlay{
  position: relative;
}
.card-overlay:after {
  content:'';
  position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  background: rgba(0, 0, 0, 0.5);
}