Author: | Amani-dot |
---|---|
Views Total: | 1,678 views |
Official Page: | Go to website |
Last Update: | March 4, 2022 |
License: | MIT |
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; }