Hello Guys, In this article or video we will see Amazing CSS Card Hover Effect Using Only HTML & CSS. You will use this Amazing Card on your website freely. If you learn How to Create this Amazing Card Hover Effect so watch my video from YouTube or bellow. And you wish to learn more Amazing HTML, CSS and JavaScript Effect or Tutorial so Subscribe my YouTube Channel Pure Coding and Stay with this website.
Watch Video
--------------------
Source Code
--------------------
First add this code on index.html file:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Amazing CSS Card Hover Effect - Pure Coding</title>
</head>
<body>
<div class="container">
<div class="card">
<div class="front-face">
<img src="design.svg" alt="">
<h2>Design</h2>
</div>
<div class="overlay">
<span>Read</span>
<div class="back-face">
<h4>Design</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Vero repellat, dolorem sequi veniam, consequuntur ad perspiciatis animi laborum
nesciunt aspernatur beatae. Omnis dolor, magnam soluta velit illum vitae hic
sint.</p>
</div>
</div>
</div>
<div class="card">
<div class="front-face">
<img src="development.svg" alt="">
<h2>Development</h2>
</div>
<div class="overlay">
<span>Read</span>
<div class="back-face">
<h4>Development</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Vero repellat, dolorem sequi veniam, consequuntur ad perspiciatis animi laborum
nesciunt aspernatur beatae. Omnis dolor, magnam soluta velit illum vitae hic
sint.</p>
</div>
</div>
</div>
<div class="card">
<div class="front-face">
<img src="analysis.svg" alt="">
<h2>Analysis</h2>
</div>
<div class="overlay">
<span>Read</span>
<div class="back-face">
<h4>Analysis</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Vero repellat, dolorem sequi veniam, consequuntur ad perspiciatis animi laborum
nesciunt aspernatur beatae. Omnis dolor, magnam soluta velit illum vitae hic
sint.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Then add this code on style.css file:
CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,
200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600
;1,700;1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
width: 100%;
min-height: 100vh;
background: #222;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 80vw;
height: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 25px;
margin: 25px 0;
}
.container .card {
width: 300px;
height: 400px;
border-radius: 5px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.container .card:nth-child(1), .container .card:nth-child(1) .overlay {
background: linear-gradient(-225deg, #FF057C 0%, #8D0B93 50%, #321575 100%);
}
.container .card:nth-child(2), .container .card:nth-child(2) .overlay {
background: linear-gradient(-225deg, #9EFBD3 0%, #57E9F2 48%, #45D4FB 100%);
}
.container .card:nth-child(3), .container .card:nth-child(3) .overlay {
background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
}
.container .card .front-face {
width: 100%;
position: absolute;
text-align: center;
color: #FFF;
}
.container .card .front-face img {
width: 30%;
}
.container .card .overlay .back-face {
position: absolute;
opacity: 0;
visibility: hidden;
transition: .3s;
}
.container .card .overlay .back-face * {
cursor: text;
}
.container .card .overlay .back-face h4 {
font-size: 1.3rem;
text-align: center;
display: block;
}
.container .card .overlay .back-face p {
text-align: justify;
}
.container .card .overlay {
width: 50px;
height: 50px;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
position: absolute;
right: 10px;
bottom: 10px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .4s;
}
.container .card .overlay:hover {
width: 100%;
height: 100%;
bottom: 0;
right: 0;
border-radius: 5px;
}
.container .card .overlay span {
font-weight: bold;
color: #FFF;
}
.container .card .overlay:hover span {
display: none;
}
.container .card .overlay:hover .back-face {
opacity: 1;
visibility: visible;
padding: 20px;
color: #FFF;
transition-delay: .3s;
}
