<!DOCTYPE html>
<html lang="en">

<head>

  <script src="https://kit.fontawesome.com/ffbd6d2f88.js" crossorigin="anonymous"></script>

</head>

<body>

  <div class="card">
    <h2>Card Heading</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, minus doloremque iste eos accusantium laborum voluptas.</p>
    <button class="card-btn">Visit</button>
    <p class="tap">
      Tap the card
    </p>
    <div class="links-container">
    <div class="bottom-links">
      <a href="#" class="text"><i class="fa-brands fa-facebook"></i></a>
      <a href="#" class="text"><i class="fa-brands fa-instagram"></i></a>
       <a href="#" class="text"><i class="fa-brands fa-twitter"></i></a>
    </div>
    </div>
  </div>

</body>

</html>
body{
  height:100vh;
  display:grid;
  place-items:center;
  background-color:rgba(0,0,0,0.9)
}

.card{
  box-sizing:border-box;
  position:relative;
  width:250px;
  height:300px;
  min-width:150px;
  min-height:200px;
  border:1px solid rgba(0,0,255,0.4);
  border-radius:5px;
  padding:1rem 2rem;
  background-color:#001f3f;
}
.card h2,.card p{
  color:rgba(255,255,255,0.7);
  font-family:sans-serif;
}

.card-btn{
  padding:0.35rem 2rem;
  background-color:#7FDBFF;
  border:none;
  border-radius:10px;
  cursor:pointer;
}
.links-container{
  min-width:100%;
  position:absolute;
  bottom:0;
  left:0;
}
.bottom-links{
  padding:1rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background-color:rgba(0,0,0,0.6);
  opacity:0;
  transition:all 0.5s linear;
  text-align:center;
}
.text{
  color:#7FDBFF;
}

.tap{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translate(-50%);
  font-size:0.75rem;
}

.card h2,.card p,.card .card-btn{
  transition:all 0.4s linear;
}
.card:hover .bottom-links{
    opacity:1;
}
.card:hover h2,
.card:hover p{
    opacity:0.5;
}
.card:hover .tap{
  opacity:0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.