In this article, we will tell you how to make Glass Card Employees List with Hover Effect Using Html, CSS only. If you like this article of ours, then click on the video given below to watch the video related to this article and also subscribe to our channel.
So let’s know how to make Glass Card Employees List with Hover Effect Using Html, CSS only.
Glassmorphism is a new design trend that is currently very popular. You’ll see it all over websites like Dribbble, and even big companies like Apple and Microsoft are using it and make Glass Card Employees List with Hover Effect Using Html, CSS only.
What is Glassmorphism?
Essentially, the main aspect of this trend is a semi-transparent background with a sublime shadow and border. But you’ve also added a blur to the background so that whatever is behind the background will “morph” into the element beautifully. Does this make any sense? This is a real world example of glassmorphism in the works, which you can also find on the ui.glass website (it’s an upcoming CSS UI library). You can see the blur effect I’m talking about in the code on the right of the picture above. See how beautifully it turns into the background, but at the same time still readable and pleasing to the eye?
Card Design
This is the effect I want to show you how to create in this tutorial. We will see how to implement this using only HTML and CSS. First of all, you have to download a code editor in which we can write our code, we are telling you the names of some code editors, Visual Studio Code, this is the most used and most people use it because some of its features are very Works easily in writing our code quickly and it has built-in tags and properties, with the help of which we make our code very easy. After this, you have to open the code editor and save it by selecting a new file and remember that while saving the file, you must write dot html because the browser has to explain it from html itself, without html we can not run any language That’s why it is very important for us to come to html.
Now you have to do coding, your file has also been created, now time has come to do your coding, so before starting coding, you must know about html css because whatever code we will write, it is in html and css only. That’s why these languages are very important to you, so let’s start coding now.
HTML for Glass Card
Now open your vs code editor and go to the right top section and click on file and select new file then save filename.html after this press ctrl+1 then html syntax generate automatically on your editor. This feature inbuild only visual code editor so i suggested you download this editor and make projects easily because it is a best code editor software. And this design for glass card project make a fast with visual studio code editor.
Now we will learn how to write html for stand fan. So let’s know that first you have to go to the body tag, after that you will take the div tag and together with the class whose name is to be named motor. Then after that we will take div tag again and we will name its class as stand. Again we will take div tag and name its class as bottom stand after that we will take div tag again and we will name its class as petal1. Again we will take div tag and name its class as Pankhdi 2, then again take div tag and name its class as Pankdi 3. Now in the last we will take the div tag and name its class as center.
CSS for Glass Card
Now we will design the glass card employee list using css. So let’s design, first of all you have to know how we write css. We write css in 3 ways first we can write inline and second we can write it internal and third we can write it external so that we have to create new css file but in this article we have used internal css so that We will not have to create css file separately and we can work inside the same file.
First of all we have to go inside the head section and going inside we have to take style tag then we will take * tag and by applying curly braces open and close in it we will keep margin as 0 and padding as 0. And will keep its box sizing border box. Then we will take the body tag and flex the display in it, then we will center the justify content, after that we will center the align items and also make the background color rgb.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(22, 22, 22);
}
All you’ll need for this tutorial is a browser and a code editor, because we’re only going to use the good old HTML and CSS
Source 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>GlassCard</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Poppins:wght@200&family=Righteous&family=Russo+One&family=Ubuntu+Mono&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
section{
position: relative;
background: #161623;
min-height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
section::before{
content: '';
position: absolute;
width: 400px;
height: 400px;
background: linear-gradient(#07ff8b,#e91e63);
border-radius: 50%;
transform: translate(-250px, -90px);
}
section::after{
content: '';
position: absolute;
width: 350px;
height: 350px;
background: linear-gradient(#2196f3,#ff8e31);
border-radius: 50%;
transform: translate(250px,120px);
}
.box{
position: relative;
min-width: 350px;
min-height: 400px;
background: rgba(255,255,255,0.1);
box-shadow: 0 25px 45px rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.5);
border-right: 1px solid rgba(255,255,255,0.2);
border-bottom: 1px solid rgba(255,255,255,0.2);
border-radius: 10px;
z-index: 10;
padding: 20px;
backdrop-filter: blur(25px);
}
.box h3{
color: #fff;
margin-bottom: 22px;
font-weight: 100;
letter-spacing: 1px;
}
.box .list{
position: relative;
display: flex;
padding: 10px 0;
background: rgba(0,0,0,0.1);
border-radius: 10px;
margin: 10px 0;
cursor: pointer;
transition: 0.5s;
overflow: hidden;
}
.box .list:hover{
background: rgba(255,255,255,0.644);
box-shadow: -15px 30px 50px rgba(0,0,0,0.5);
transform: scale(1.15) translateX(30px) translateY(-15px);
z-index: 1000;
}
.box .list .imgbx{
position: relative;
width: 60px;
height: 60px;
margin-left: 10px;
border-radius: 10px;
overflow: hidden;
}
.box .list .imgbx img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.box .list .content{
display: flex;
flex-direction: column;
justify-content: center;
color: #fff;
margin-left: 10px;
}
.box .list .content .rank{
position: absolute;
right: -50px;
color: #03a9f4;
transition: 0.5s;
font-size: 2em;
font-weight: bold;
}
.box .list .content .rank small{
font-weight: 500;
opacity: 0.25;
}
.box .list:hover .content .rank{
right: 20px;
}
.box .list .content h4{
line-height: 1.2em;
font-weight: 200;
transition: 0.5s;
}
.box .list .content p{
font-size: 0.75em;
transition: 0.5s;
color: rgba(255,255,255,0.692);
}
.box .list:hover .content h4,
.box .list:hover .content p{
color: #333;
}
</style>
</head>
<section>
<div>
<h3>Popular Employees Rank List</h3>
<div>
<div>
<img src="./team-1.png">
</div>
<div>
<h2><small>#</small>1</h2>
<h4>Ricardo Flangan</h4>
<p>Digital Artist</p>
</div>
</div>
<div>
<div>
<img src="./team-2.png">
</div>
<div>
<h2><small>#</small>2</h2>
<h4>Christina Shaw</h4>
<p>Photoshop Expert</p>
</div>
</div>
<div>
<div>
<img src="./team-3.png">
</div>
<div>
<h2><small>#</small>3</h2>
<h4>Lina Andrson</h4>
<p>Web Designer</p>
</div>
</div>
<div>
<div>
<img src="./istockphoto-523478288-170667a.jpg">
</div>
<div>
<h2><small>#</small>4</h2>
<h4>Mark Daniel</h4>
<p>Web Developer</p>
</div>
</div>
<div>
<div>
<img src="./beautiful-cute-girl-girly-wallpaper-preview.jpg">
</div>
<div>
<h2><small>#</small>5</h2>
<h4>Nancy Jorden</h4>
<p>Graphic Designer</p>
</div>
</div>
</div>
</section>
<body>
</body>
</html>Watch video related this article…
