Hello readers, Today In this article I am going to show you How To Create Glassmorphism Card Hover Effects in HTML & CSS. This type of Glassmorphism Card is used for website Card Design. One of the most beautiful and good-looking designs.
You easily create this Glassmorphism Card Hover Effects Using HTML & CSS then this article will definitely help you. For this, you need to have an idea about basic HTML & CSS then you can understand the following codes. It is designed in a completely modern way.
Some Information About This Glassmorphism Card Hover Effects
Normally Show the Card with two background color. The card is glassmorphism. In the card, there have Image and card details Name, Work name & social media icon. When you hover the social media icon then background color change like that top background color and icon color is white.
Watch the video tutorial to create Glassmorphism Card Hover Effects
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this design step by step. So you can learn how to make this beautiful glassmorphism design. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this glassmorphism card hover effect. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- CSS Glowing Social Media Icon Hover Effects
- Animated Sidebar Menu Using HTML, CSS & JS
- E-Commerce Product Card Design In HTML CSS & JS
Glassmorphism Card Hover Effects | Source Codes
You have to create HTML and CSS File For this Site. After creating these files just paste the following codes into your file.
First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on this website won’t appear.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Glassmorphism Card</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
<!---Fontawesome CDN Link-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">
</head>
<body>
<div class="card">
<div class="imgBx">
<img src="./image/img.png">
</div>
<div class="content">
<div class="details">
<h2>Alina Smith<br/><span>Senior Designer</span></h2>
</div>
<ul class="sci">
<li>
<a href=""><i class="fab fa-facebook-f"></i></a>
</li>
<li>
<a href=""><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href=""><i class="fab fa-linkedin"></i></a>
</li>
<li>
<a href=""><i class="fab fa-instagram"></i></a>
</li>
</ul>
</div>
</div>
</body>
</html>Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,[email protected],300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Ubuntu", sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(#03a9f4, #03a9f4 45%, #fff 45% 100%);
}
.card{
position: relative;
width: 300px;
height: 400px;
background-color: #fff;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
border-top: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
}
.imgBx{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
transform: translateY(30px) scale(0.5);
transform-origin: top;
}
.imgBx img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.content{
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: column;
padding-bottom: 30px;
}
.content .details{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
.content .details h2{
color: #444;
font-size: 1.5em;
font-weight: 500;
}
.content .details h2 span{
font-size: 0.7em;
color: #03a9f4;
font-weight: 400;
}
.sci{
position: relative;
display: flex;
margin-top: 5px;
}
.sci li{
list-style: none;
margin-right: 8px;
}
.sci li a{
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: transparent;
text-decoration: none;
font-size: 1.25em;
color: #444;
box-shadow: 0 7px 15px rgba(0, 0, 0, 0.1);
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.sci li a:hover{
background-color: #03a9f4;
color: #fff;
}now you’ve successfully created this design using HTML and CSS. If your code does not work or faced any error/problem to comment down or contact us through the contact page.
