<div class="flexbox">
  <div class="item">
    <img src="https://unsplash.it/600/400?random" />
    <p class="title">1st item</p>
  </div>
  <div class="item">
    <img src="https://unsplash.it/600/600?random" />
    <p class="title">2nd item</p>
  </div>
  <div class="item">
    <img src="https://unsplash.it/720/460?random" />
    <p class="title">3rd item</p>
  </div>
  <div class="item">
    <img src="https://unsplash.it/800/400?random" />
    <p class="title">4th item</p>
  </div>
  <div class="item">
    <img src="https://unsplash.it/480/700?random" />
    <p class="title">5th item</p>
  </div>
  <div class="item">
    <img src="https://unsplash.it/680/420?random" />
    <p class="title">6th item</p>
  </div>
  <div class="item">
    <img src="https://unsplash.it/740/480?random" />
    <p class="title">7th item</p>
  </div>
  <div class="item">
    <img src="https://unsplash.it/840/440?random" />
    <p class="title">8th item</p>
  </div>
  <div class="item">
    <img src="https://unsplash.it/640/380?random" />
    <p class="title">9th item</p>
  </div>
  <div class="item">
    <img src="https://unsplash.it/500/680?random" />
    <p class="title">10th item</p>
  </div>
</div>

// ******************************
// Basic styling (ignore me!)
// ******************************
*{
  box-sizing:border-box;
}
body{
  font-family:Arial,"Hiragino Kaku Gothic Pro W3",Meiryo,sans-serif;
  background-color:#333;
  color: #fff;
  text-align: center;
  a,
  a:visited{
    color:#ccc;
    text-decoration:none;
  }
  p{
    margin:0;
  }
}
// ******************************
// End of Basic styling
// ******************************

// Flexbox wrapper
.flexbox{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	height: 100vw;
  
  &:hover{
    img {
      opacity:0.28;
    }
  }

  // Each flex item
  .item{
    position:relative;
    width: 33.33%;  // 3 column
    img{
      width: 100%;
      display: block;
      transition:all .8s;
    }
    .title{
      position:absolute;
      top:48%;
      left:0;
      width:100%;
      padding:0 3%;
      font-size:30px;
      text-shadow:0 0 8px rgba(0,0,0,0.42);
    }
    &:hover{
      img{
        opacity:1;
      }
    }
  }
}

// Mediaqueries
@media ( max-width : 860px ){
  // set to 2 column
  .flexbox{
    height:220vw;
    .item{
      width:50%;
    }
  }
}
@media ( max-width : 667px ){
  // set to 1 column
  .flexbox{
    height:auto;
    .item{
      width:100%;
    }
  }
}