<div class="wrapper">
  <div class="content0">opacity:0</div>
  <div class="content1">opacity:0.1</div>
  <div class="content2">opacity:0.2</div>
  <div class="content3">opacity:0.3</div>
  <div class="content4">opacity:0.4</div>
  <div class="content5">opacity:0.5</div>
  <div class="content6">opacity:0.6</div>
  <div class="content7">opacity:0.7</div>
  <div class="content8">opacity:0.8</div>
  <div class="content9">opacity:0.9</div>
  <div class="content10">opacity:1</div>
</div>

div.wrapper{
  display:flex;
  flex-wrap:wrap;
}

div:not(.wrapper){
  display:flex;
  align-items:center;
  justify-content:center;
  width:150px;
  height:100px;
  background:skyblue;
}

.content0{
  opacity:0;
}

.content1{
  opacity:0.1 ;
}

.content2{
  opacity:0.2;
}

.content3{
  opacity:0.3;
}

.content4{
  opacity:0.4;
}

.content5{
  opacity:0.5;
}

.content6{
  opacity:0.6;
}

.content7{
  opacity:0.7;
}

.content8{
  opacity:0.8;
}

.content9{
  opacity:0.9;
}

.content10{
  opacity:1;
}