JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
  <div class="col-md-6">
    <div class="reward">
      <div class="image-box">
        <img src="https://fit4health.completedigital.co.uk/wp-content/uploads/2020/10/[email protected]" alt="">
      </div>
      <div class="text-layer">
        <h3>Fitness technology</h3>
        <div class="description">
          <p>Health insurers have links with the top gyms in the UK including David Lloyds, Virgin Active and many more. </p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="reward">
      <div class="image-box">
        <img src="https://fit4health.completedigital.co.uk/wp-content/uploads/2020/10/[email protected]" alt="">
      </div>
      <div class="text-layer">
        <h3>Fitness technology</h3>
        <div class="description">
          <p>Health insurers have links with the top gyms in the UK including David Lloyds, Virgin Active and many more. For some policies, with no extra charge, you can get a free or discounted gym membership with your policy. </p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="reward">
      <div class="image-box">
        <img src="https://fit4health.completedigital.co.uk/wp-content/uploads/2020/10/[email protected]" alt="">
      </div>
      <div class="text-layer">
        <h3>Fitness technology</h3>
        <div class="description">
          <p>Health insurers have links with the top gyms in the UK including David Lloyds, Virgin Active and many more. For some policies, with no extra charge, you can get a free or discounted gym membership with your policy. For some policies, with no extra charge, you can get a free or discounted gym membership with your policy. </p>
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

.reward {
  position: relative;
  max-width: 500px;
  .image-box {
    img {
      max-width: 100%;
      height: auto;
      display: block;
    }
  }
  .text-layer {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 40px;
    color: #FFF;
    overflow: hidden;
    h3 {
      margin: 0;
    }
    p {
      margin: 1rem 0 0;
    }
    .description {
      max-height: 0;
      transition: all 400ms ease-in-out;
    }
  }
  
  &:hover {
    .text-layer {
      .description {
        max-height: 450px;
      }
    }
  }
}