How to animate the disappearance of elements using css?

Question

css

How to implement the disappearance and appearance of elements on hover? So that the elements travel from above and below, respectively. Example without animation

Answer 1

.card-title{
  height: 30px;
  transition: height 0.5s linear;
}
.card-body:hover .card-title{
  height: 0px;
  overflow: hidden;
}