css flexwrap cover

by chanonroy

HTML

<div class="box">
  <div class="first"></div>
  <div class="second"></div>
  <div class="three">
    No YouTube Data
  </div>
</div>

<div class="box">
  <div class="first"></div>
  <div class="second"></div>
  <div class="three">
    No Twitch Data
  </div>
</div>

<div class="box">
  <div class="first"></div>
  <div class="second"></div>
  <div class="three">
    No YouTube Data
  </div>
</div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 30%;
  height: 250px;
  background-color: white;
  margin: 5px;
  padding: 12px;
}

.first {
  width: 100%;
  height: 250px;
  background-color: lightblue;
}

.second {
  width: 100%;
  height: 50%;
  background-color: lightgreen;
}

.three {
  height: 100%;
  width: 100%;
  margin-top: -250px;
  background-color: lightgrey;
  opacity: 0.8;
  display: flex;
  justify-content: center;
  align-items: center;
}