How to hide invisible Elements in CSS Animation?

Question

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>

Answer 1

.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>

Answer 2

I saw the last 2 responses. I come to you to offer an excellent version of this UX card. I did this on codepen a few months ago and tried to put a cool effect on the card. Maybe my participation will help you! My codepen : https://codepen.io/ZellRDesign/pen/MPbRyr

* { box-sizing: border-box; }

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

body{
  font-family: "Open Sans";
  font-size:16px;
  background-color: #eee;
}

.link{
    display: block;
}

.card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform :  translateX(-50%) translateY(-50%) translateZ(0);
  width: 370px;
  box-shadow: 0 0 20px rgba(black,0.1);
  overflow: hidden;
  transition: box-shadow 0.5s;
}

.card a{
    color:inherit;
    text-decoration: none;
}

.card:hover{
  box-shadow:0 0 50px rgba(black,0.3);
}

.card-date{
  position: absolute;
  top: 20px;
  right: 20px;
  width: 45px;
  height: 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgb(68, 105, 176);
  border-radius: 50%;
  color:#fff;
  font-weight: 700;
  line-height: 13px;
  font-weight: 300;
}

.card-date-month{
    text-transform: uppercase;
    font-size:10px;
}

.card-date-day{
    font-size:14px;
}

.card-thumb{
  height: 245px;
  overflow: hidden;
  background-image: url("https://images.unsplash.com/photo-1512036849132-48508f294900?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=af817fb1a3fe6d229f4bfc0b8d60441a&auto=format&fit=crop&w=634&q=80");
  background-size: cover;
  transition: height 0.5s;
  
  img{
    display:block;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s, transform 0.5s;
  }
}

.card:hover .card-thumb{
    height: 130px;
}

.card-body{
  position: relative;
  height: 105px;
  background-color: #e6e6e6;
  padding:20px;
  transition: height 0.5s;
}

.card:hover .card-body{
    height: 220px;
}

.card-title{
  margin: 0;
  padding: 0 0 10px 0;
  color: #000;
  font-size: 22px;
  font-weight: bold;
  text-transform: uppercase;
}

.card-description{
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  margin: 0;
  padding: 0;
  color: #666C74;
  line-height: 27px;
  opacity:0;
  transform: translateY(45px);
  transition: opacity 0.5s -0.2s, transform 0.5s -0.2s;
  transition-delay: 0s;
}
.card:hover .card-description{
    opacity:1;
    transform: translateY(0);
    transition-delay: 0.2s;  
}

<article class="card">
  <header class="card-thumb">
    <a href="#" class="link"></a>
  </header>
  <date class="card-date">
    <span class="card-date-day">11</span>
    <br/>
    <span class="card-date-month">Juin</span>
  </date>
  
  <div class="card-body">
    <h2 class="card-title"><a href="#">We're on a highway to hell!</a></h2>
    <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit cumque non commodi, modi recusandae cupiditate ipsa ab soluta. Illum, dolore.</p>
  </div>
</article>

NB : this link can provide you an awesome tutoriel to do this (in French): https://www.grafikart.fr/tutoriels/card-ui-629

Answer 3

You can Use the visibility Property

Example 1:

h2.a {
   visibility: visible;
}

h2.b {
   visibility: hidden;
}

Example 2:

HTML

<div class="container">
 <h1>Link Hover Here</h1>

  <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, aut! Ea eos 
   voluptate numquam sapiente cum, enim facilis a cumque dolore, modi, autem possimus 
   voluptatem architecto ratione sequi dolores ipsa.</h3>
</div>

CSS

h3{
    visibility: hidden;
}

h1:hover {
  color: #ff0000;
}

.container:hover h3{
  visibility: visible;
}

CSS visibility Property: https://www.w3schools.com/cssref/pr_class_visibility.asp

Codepen: https://codepen.io/manaskhandelwal1/pen/abOpNgR

Answer 4

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

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

.card-text{
  display:none;
}

.card:hover .card-text{
  display:block;
}

.card:hover .card-body{
  position:relative !important;
}

@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>