<div class="container">
  

<div class="row">
  <div class="thumb-box">
  <a href="">
    <img src="https://picsum.photos/640/480/?random" alt="">
     <span class="overlay-box">
    <span class="meta">Feb 20, 2019</span>
    <span class="main-title">Lorem lipsum dollar set for dummy text.</span>
    <span class="description">Lorem lipsum dollar set is the best dummy text for the web world which has the best interaction Lorem lipsum dollar set is the best dummy text for the web world which has the best interaction...</span>
      </span>
  </a>
</div>

  <div class="thumb-box">
  <a href="">
      <img src="https://picsum.photos/640/480" alt="">
     <span class="overlay-box">
    <span class="meta">Feb 20, 2019</span>
    <span class="main-title">Simply the best text for dummy world is lorem lipsum.</span>
    <span class="description">Lorem lipsum dollar set is the best dummy...</span>
      </span>
  </a>
</div>

  <div class="thumb-box">
  <a href="">
      <img src="https://picsum.photos/640/480/?random" alt="">
    <span class="overlay-box">
    <span class="meta">Feb 20, 2019</span>
    <span class="main-title">How can we edit lorem lipsum text for dummy data.</span>
    <span class="description">Lorem lipsum dollar set is the best dummy text for the web world which has the best interaction...</span>
      </span>
  </a>
</div>
</div>
</div>

a {
  color:#fff;
  text-decoration:none;
}
* {
  outline:0;
  
}
body {
  margin-top:100px;
  background:#111;
  font-size:11px;
  color:#aaa;
  font-family:"Poppins", sans-serif;
  color:
}

.container  {
  max-width:1140px;
  margin:0 auto; 
  display:block;
}
.row  {
  display:flex;
  align-items:center
}

.thumb-box {
  display:flex;
  max-width:33.3333%;
  margin:0 15px;
  position:relative;

   
    
}


.thumb-box a {
  padding:0;
  position: relative;
    width: 100%;
    height: 100%;
  z-index:9997;
}

.thumb-box img {
 
    width:100%;
    height:280px;
    float:left;
  }

.overlay-box {
  position:absolute;
  bottom:0;
  width:90%;
  z-index:9998;
  left:0;
  padding:5%;
      background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.75));
}

.meta {
  font-size:14px;
  display:block;
  
}

.main-title {
  font-size:16px;
  display:block;
  font-weight:700;
  text-shadow:0 0 1px rgba(0,0,0,0.5);
}

.description {
  color:#ccc;
  font-size:13px;
  margin-top:5px; 
  display:block;
  color: #ccc;
    max-height: 0;
    line-height: 18px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease-out, max-height 0.4s ease-out, margin 0.4s;
}

.thumb-box a:hover .description {
    opacity:1;
        max-height: 100px;
        margin-top: 5px;
        transition: opacity 0.4s ease-out, max-height 0.9s ease-out
}

.thumb-box a:hover .overlay-box {
  background-image: linear-gradient(to bottom, transparent, rgba(0,0,0, 1));

}