Hello guys, today I am going to show you how to create a unique card hover effect, in this video, you will learn how to How to make awesome hover animation using HTML & CSS.
How to create a unique card hover effect step by step
Step 1 — Creating a New Project
In this step, we need to create a new project folder and files(index.html, style.css) for creating an awesome hover animation on card. In the next step, you will start creating the structure of the webpage.
See Also: Best card design UI
Step 2 — Setting Up the basic structure
In this step, we will add the HTML code to create the basic structure of the project.
<!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>How to Create Unique Card Hover Effect </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>This is the base structure of most web pages that use HTML.
Add the following code inside the <body> tag:
<div class="container">
<div class="grid-row grid-auto">
<div class="colmun">
<div class="ch-item img">
<div class="info-wrap">
<div class="info">
<div class="info-front img"></div>
<div class="info-back">
<h6>JOHN DOE</h6>
<p>Visaul Designer <a href="#">Contact</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="colmun">
<div class="ch-item img">
<div class="info-wrap">
<div class="info">
<div class="info-front img"></div>
<div class="info-back">
<h6>JOHN DOE</h6>
<p>Visaul Designer <a href="#">Contact</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="colmun">
<div class="ch-item img">
<div class="info-wrap">
<div class="info">
<div class="info-front img"></div>
<div class="info-back">
<h6>JOHN DOE</h6>
<p>Visaul Designer <a href="#">Contact</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="colmun">
<div class="ch-item img">
<div class="info-wrap">
<div class="info">
<div class="info-front img"></div>
<div class="info-back">
<h6>JOHN DOE</h6>
<p>Visaul Designer <a href="#">Contact</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Step 3 — Adding Styles for the Classes
In this step, we will add styles to the section class Inside style.css file
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'IBM Plex Sans', sans-serif;
}
body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
}
.container {
width: 90%;
max-width: 1200px;
margin: auto;
}
.grid-row.grid-auto {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.ch-item {
width: 220px;
height: 284px;
position: relative;
cursor: pointer;
margin: auto;
box-shadow: 0px 1px 1px 1px rgb(0 0 0 / 30%), 0px 1px 0px 1px rgb(28 34 36 / 30%);
}
.info-wrap {
top: 20px;
left: 20px;
background: #1c2224;
box-shadow: 0 0 0 20px rgb(225 255 255 / 20%), inset 0 0 3px rgb(115 114 23 / 80%);
}
.info-wrap,
.info {
position: absolute;
width: 180px;
height: 244px;
}
.img {
background: url(img.jpg);
}
.info .info-front {
transition: all 0.6s ease-in-out;
}
.info>div {
display: block;
position: absolute;
width: 100%;
height: 100%;
background-position: center center;
}
.info-back {
opacity: 0;
background: url(cartographer.png) repeat;
pointer-events: none;
transform: scale(1.5);
transition: all 0.4s ease-in-out 0.2s;
}
.info-back h6 {
color: #fff;
font-size: 20px;
text-align: center;
height: 64px;
margin-top: 60px;
}
.info-back p {
color: #fff;
text-align: center;
padding: 10px 5px 0;
font-style: italic;
margin: 0 20px;
font-size: 12px;
border-top: 2px dotted;
}
.info-back p a {
display: block;
color: #fa6900;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 5px;
transition: all 0.4s ease-out;
}
.ch-item:hover .info-back {
transform: scale(1);
opacity: 1;
pointer-events: auto;
}#Final Result
We hope you liked this article. You should definitely keep your thoughts about it in the comment below and share this article with your friends.