Glassmorphism Style Card Hover Effect In CSS

Preview:

Description:

A quick tutorial on how to create a Glassmorphism-style card hover effect using only CSS.

How to use it:

1. Code the HTML for the Glassmorphism-style 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 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 for the hover animation.

.card:hover .content{
  transform: translateY(0px);
  opacity:1;
}