Q:

How to hide invisible Elements in CSS Animation?

I have coded a Bootstrap 4 animated card: https://codepen.io/Steven2105/pen/ZEGLWma.
The card shows a heading by default, the card text should be invisible.
Once you hover over the card the text also should move up and be visible.
So my question is, how can I hide the card text, only show the heading and make it visible once hovered. 
If you scroll down on this page, you should also see such cards and I want them to be like them.

.card-body {
  margin-top: -58px;
  background-color: rgba(0, 82, 204, 0.7);
}

.card:hover .card-body {
  animation-duration: 0.6s;
  animation-name: slidein;
  animation-fill-mode:both;
  margin-top: 0;
}

@keyframes slidein {
  from {
    transform: translateY(0);
  }
  
  to {
    transform: translateY(-100%);
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

A:

.card {
  position: relative;
  overflow: hidden;
}

.card-body {
  bottom: 0;
  width: 100%;
  position: absolute;
  background-color: rgba(0, 82, 204, 0.7);
}

.card-text {
  opacity: 0;
  max-height: 0;
  transition: all 0.5s ease-in;
}

.card:hover .card-text {
  display: block;
  max-height: 150px;
  opacity: 1;
  transition: all 1s ease-out; 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

