<div class="grid">
  <div class="grid__item">
    <div class="grid__content">Ducimus perferendis vitae et harum distinctio aperiam, odit, veritatis odio reiciendis amet beatae deserunt deleniti quidem! Pariatur obcaecati deleniti esse eligendi iste?</div>
  </div>
  <div class="grid__item">
    <div class="grid__content">Lorem ipsum dolor sit amet consectetur adipisicing elit. um quis numquam molestiae ratione minus odio, placeat dolores minima?</div>
  </div>
  <div class="grid__item">
    <div class="grid__content">Lorem ipsum dolor, sit amet consicing elit. In ipsum aspernatur reprehenderit, consequatur deserunt voluptatum maiores architecto esse eius dolores amet nulla, quaerat suscipit velit veniam ab. Quasi, suscipit dicta?</div>
  </div>
  <div class="grid__item">
    <div class="grid__content">In ipsum aspernatur reprehenderit, consequatur deserunt voluptatum maiores architecto esse eius dolores amet nulla, quaerat suscipit velit veniam ab. Quasi, suscipit dicta?</div>
  </div>
  <div class="grid__item">
    <div class="grid__content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur nobis delectus illo ea similique repellendus autem, accusamus</div>
  </div>
  <div class="grid__item">
    <div class="grid__content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur nobis delectus illo ea similique repellendus autem, accusamus harum sit quod.</div>
  </div>
  <div class="grid__item">
    <div class="grid__content">Consequuntur nobis delectus illo ea similique repellendus autem, accusamus harum sit quod. Modi eligendi magnam fugit labore ullam quam iste voluptas libero.</div>
  </div>
  <div class="grid__item">
    <div class="grid__content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur nobis delectus illo ea similiqued. Modi eligendi magnam fugit labore ullam quam iste voluptas libero.</div>
  </div>
  <div class="grid__item">
    <div class="grid__content">Lorem ipsum dolor sit, amet consectetur adit quod. Modi eligendi magnam fugit labore ullam quam iste voluptas libero.</div>
  </div>
  <div class="grid__item">
    <div class="grid__content">Lorem ipsum dolor sit, amet cood. Modi eligendi magnam fugit labore ullam quam iste voluptas libero.</div>
  </div>
</div>

* {
  box-sizing: border-box;
}

.grid {
  margin: 0 auto;
  max-width: 700px;
  display: flex;
  flex-wrap: wrap;
}

.grid__item {
  width: 20%;
  height: 200px;
  padding: 10px;
}

.grid__item:hover {
  z-index: 1;
}

.grid__item:hover .grid__content {
  height: auto;
  box-shadow: 0 0 10px black;
}

.grid__item:hover .grid__content::after {
  height: 0;
}

.grid__content {
  position: relative;
  height: 100%;
  min-height: 100%;
  background-color: #ddd;
  overflow: hidden;
  padding: 10px;
  transition: box-shadow 250ms;
}

.grid__content::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(transparent, #ddd);
}