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:
Glassmorphism Profile Card Source Code:
INDEX.HTML CODE
<html lang="en"><head><meta charset="UTF-8"></meta><meta content="IE=edge" http-equiv="X-UA-Compatible"></meta><meta content="width=device-width, initial-scale=1.0" name="viewport"></meta><title>Code With Shahriar</title><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"></link><link href="style.css" rel="stylesheet"></link></head><body><section><div class="container"><div class="card"><div class="content"><div class="imgBox"><img alt="" src="https://tec-sense.com/wp-content/uploads/2019/09/avtar-man.png" /></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 alt="" src="https://tec-sense.com/wp-content/uploads/2019/09/avtar-man.png" /></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 alt="" src="https://tec-sense.com/wp-content/uploads/2019/09/avtar-man.png" /></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
*{ 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