Hey friends today, let's see how to make this cool glassmorphism card with a colorful hover effect using CSS Only.
Now let's see about this project. When the page is loaded, a color gradient card appears with text that says hover me. This card then turns into a glassmorphism card with colors on the side when hovered. Then when the mouse is hovered away, it becomes the gradient card again.
Do watch my video tutorial below for better understandings:
Now, let's see the source codes!
Paste the codes below in your HTML file:
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorphism Card with Color Hover Effect</title>
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
margin: 0;
padding:0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
background-color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.card{
width:250px;
height: 300px;
position: relative;
cursor: pointer;
}
.card .content{
width:100%;
height: 100%;
background: rgba(255,255,255,0.089);
backdrop-filter: blur(20px);
border:1px solid white;
color:white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0 0 30px rgba(0,0,0,0.055);
transition: all .4s;
}
.card .content p{
font-size: 0.8em;
padding:0.3em 1.5em;
text-align: center;
}
.card:hover .content{
color:rgb(36,36,36);
}
.card::before,
.card::after{
content:'';
position: absolute;
width:100%;
height:50%;
background:#ef709b;
z-index:-20;
transition:all .4s;
}
.card::before{
top:0;
right:0;
}
.card::after{
bottom:0;
left:0;
background:#fa9372;
}
.card:hover::before{
width:50px;
height:50px;
transform:translate(20px, -20px);
border-radius: 50%;
}
.card:hover::after{
width:100px;
height:100px;
transform:translate(-20px, 20px);
border-radius:50%;
}
</style>
<div class="card">
<div class="content">
<h1>Hover Me!</h1>
<p>Hover me and watch the effect where the two colors separate into 2 circle diagonally on the corners.</p>
</div>
</div>
</body>
</html>
And that's all for this tutorial. Thanks for reading and do subscribe to our YouTube channel to support us. Till the next one, goodbye!
Post a Comment