A quick tutorial on how to create a transparent card design hover effect using only CSS.

Author: Amani-dot

How to use it:

1. HTML code for design transparent card.

<div class="card">
  <div class="content">
    <h1>01</h1>
    <h2>Card One</h2>
    <p>Card Description.</p>
    <a href="#">Card Link</a>
  </div>
</div>

2. The main CSS styles for the card & content. 

.card{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(255,255, 255, 0.5);
  border-left: 1px solid rgba(255,255, 255, 0.5);
  height: 400px;
  width:280px;
  border-radius:15px;
  backdrop-filter:blur(5px) ;
  background:rgba(255,255, 255, 0.1);
  overflow: hidden;
  box-shadow:20px 20px 50px rgba(0, 0, 0, 0.5);
  margin:30px;
}
.content{
  text-align: center;
  padding:20px;
  color: white;
  transition: 0.5s;
  transform: translateY(100px);
  opacity: 0;
}
h1{
  position: absolute;
  top: -80px;
  left:30%;
  font-size: 8em;
  color:rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
h2{
  font-size: 1.8em;
  color: #fff;
  z-index:1;
}
p{
  font-size: 1em;
  color:#fff;
  font-weight: 300px;
}
a{
  position: relative;
  background-color: #fff;
  color: black;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 15px;
  margin-top: 15px;
  font-weight: 500;
  display: inline-block;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

3. The CSS styles for the hover card animation.
  
.card:hover .content{
  transform: translateY(0px);
  opacity:1;
}

Result:

See the Pen Transparent Card Design Hover Effect In CSS by Mengseng Oeng (@mengsengoeng) on CodePen.