<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="card-wrapper col-lg-4 col-md-6 col-xs-12">
      <div class="card">
        <div class="card-img-wrapper">
          <img class="card-img-top" src="https://www.fortech.ro/wp-content/uploads/2018/12/DigitalCommerceSoftwarePlatform-e1554472385425.jpg" alt="Card image cap">
        </div>
        <div class="card-body">
          <h5 class="card-title">Special title treatment Special</h5>
          <div class="card-content">
            <p class="card-text">With supporting text below as a natural lead-in to additional content. With supporting text below as a natural</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
    </div>
    <div class="card-wrapper col-lg-4 col-md-6 col-xs-12">
      <div class="card">
        <div class="card-img-wrapper">
          <img class="card-img-top" src="https://www.fortech.ro/wp-content/uploads/2018/12/DigitalCommerceSoftwarePlatform-e1554472385425.jpg" alt="Card image cap">
        </div>
        <div class="card-body">
          <h5 class="card-title">Special title treatment Special title treatment</h5>
          <p class="card-text">With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="card-wrapper card-image col-lg-4 col-md-6 col-xs-12">
      <div class="card">
        <div class="card-img-wrapper">
          <img class="card-img-top" src="https://www.fortech.ro/wp-content/uploads/2018/12/DigitalCommerceSoftwarePlatform-e1554472385425.jpg" alt="Card image cap">
        </div>
        <div class="card-body">
          <h5 class="card-title">Special title treatment</h5>
          <p class="card-text">With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="card-wrapper card-image-title-description col-lg-4 col-md-6 col-xs-12">
      <div class="card">
        <div class="card-img-wrapper">
          <img class="card-img-top" src="https://www.fortech.ro/wp-content/uploads/2018/12/DigitalCommerceSoftwarePlatform-e1554472385425.jpg" alt="Card image cap">
        </div>
        <div class="card-body">
          <h5 class="card-title">Special title treatment</h5>
          <p class="card-text">With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

.card-wrapper {
  margin-bottom: 30px;
}
.card-image .card .card-img-wrapper {
  height: 100%;
}
.card-image .card .card-body {
  display: none;
}
.card-image-title-description .card .card-img-wrapper {
  max-height: 160px;
}
.card-image-title-description .card {
  position: relative;
  min-height: 300px;
}
.card-image-title-description .card .card-body {
  height: auto;
  position: relative;
  top: 0;
  margin-bottom: -70px;
}
.card-image-title-description .card:hover .card-body {
  top: -70px;
}
.card-image-title-description .card .card-body .card-title {
  margin-bottom: .75rem;
}
.card {
  display: inline-block;
  position: relative;
  overflow: hidden;
  min-height: 400px;
  height: 100%;
}
.card:hover {
  box-shadow: 8px 12px 31px -10px #ab98ab;
}
.card-img-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50%;
  overflow: hidden;
}
.card-img-wrapper img {
  transition: 1.5s ease;
}
.card:hover .card-img-wrapper img {
  transform: scale(1.15);
}
.card-body .card-title {
  margin-bottom: calc(50% + 20px);
  transition: 1.5s ease;
}
.card:hover .card-body .card-title {
  margin-bottom: .75rem;
}

.card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background-color: #fff;
  transition: 1.5s ease;
}
.card-content {
  left: 0;
  right: 0;
  overflow: hidden;
  width: 100%;
  height: auto;
  transition: 1.5s ease;
}
.card:hover .card-body {
  height: 80%;
}
.card:hover .card-content {
  bottom: 0;
}
body {
  margin: 0;
  background-image: linear-gradient(to right, #ECE9E6 , #FFFFFF);
}