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