Responsive Glassmorphism Profile Card Hover Effects
Glassmorphism is a modern way approach to styling web components of any site page and giving a 3D as well as a glass impact. This liveliness impact can be effortlessly produced by utilizing HTML, CSS, and Vanilla-slant JS. We can carry out Glassmorphism utilizing different CSS properties.
Learn From Tutorial:
[embedyt] https://www.youtube.com/watch?v=DM29GbK26kw[/embedyt]
Glassmorphism Profile Card Source Code:
INDEX.HTML 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>Code With Shahriar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<div class="container">
<div class="card">
<div class="content">
<div class="imgBox">
<img src="https://tec-sense.com/wp-content/uploads/2019/09/avtar-man.png" alt="">
</div>
<div class="contentBox">
<h3>Shahriar<br><span>Web Developer</span></h3>
</div>
</div> <!-- content end here-->
<ul class="listCat">
<li><a href="#">Eat</a></li>
<li><a href="#">Sleep</a></li>
<li><a href="#">Code</a></li>
<li><a href="#">Repeat</a></li>
</ul>
</div>
<div class="card">
<div class="content">
<div class="imgBox">
<img src="https://tec-sense.com/wp-content/uploads/2019/09/avtar-man.png" alt="">
</div>
<div class="contentBox">
<h3>Shahriar<br><span>CSS Lover</span></h3>
</div>
</div> <!-- content end here-->
<ul class="listCat">
<li><a href="#">Eat</a></li>
<li><a href="#">Sleep</a></li>
<li><a href="#">Code</a></li>
<li><a href="#">Repeat</a></li>
</ul>
</div>
<div class="card">
<div class="content">
<div class="imgBox">
<img src="https://tec-sense.com/wp-content/uploads/2019/09/avtar-man.png" alt="">
</div>
<div class="contentBox">
<h3>Shahriar<br><span>Tech Blogger</span></h3>
</div>
</div> <!-- content end here-->
<ul class="listCat">
<li><a href="#">Eat</a></li>
<li><a href="#">Sleep</a></li>
<li><a href="#">Code</a></li>
<li><a href="#">Repeat</a></li>
</ul>
</div>
</div>
</section>
</body>
</html>
STYLE.CSS CODE
*{
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background-color: #161616;
min-height: 100vh;
}
/* We need to style background with section tag */
section::before{
content: '';
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(#DA22FF, #9733EE);
clip-path: circle(30% at right 70%);
}
section::after{
content: '';
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(#E55D87, #5FC3E4);
clip-path: circle(20% at 10% 10%);
}
.container{
position: relative;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin:40px 0;
}
.container .card{
position: relative;
width: 300px;
height: 400px;
background-color: rgba(255, 255, 255, 0.05);
margin: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(10px);
}
.container .card .content{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: 0.5s;
}
.container .card:hover .content{
transform: translateY(-20px);
}
.container .card .content .imgBox{
position: relative;
width: 150px;
height: 150px;
overflow: hidden;
}
.container .card .content .imgBox img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.container .card .content .contentBox h3{
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
font-size: 18px;
text-align: center;
margin: 20px 0 10px;
line-height: 1.1em;
}
.container .card .content .contentBox h3 span{
font-size: 12px;
font-weight: 300;
text-transform: initial;
}
.container .card .listCat{
position: absolute;
bottom: 50px;
display: flex;
}
.container .card .listCat li{
list-style: none;
margin:0 10px;
transform: translateY(40px);
transition: 0.5s;
opacity: 0;
}
.container .card:hover .listCat li{
transform: translateY(0px);
opacity: 1;
}
.container .card .listCat li a{
color: #fff;
font-size: 20px;
}
ALSO LEARN:
Neon Light Button Animation Effects
CSS Isometric Hamburger Menu Hover Effect
CSS Isometric Menu Hover Effects
Amazing CSS 3D Menu Hover Effect
