Responsive Glassmorphism Profile Card Hover Effects

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

Post a Comment

0 Comments