CSS Image With Black Overlay and Center White Text

December 1, 2019
<div class="overlay">
<img src="https://via.placeholder.com/150" />
<div>+1</div>
</div>

Scss

.overlay {
  position: relative;

  > div {
    position: absolute;
    color: #fff;
    font-size: 35px;
    background-color: rgba(0, 0, 0, .4);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;

    // center text
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

CSS

.overlay {
  position: relative;
}
.overlay > div {
  position: absolute;
  color: #fff;
  font-size: 35px;
  background-color: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.