Hello Guys, In this article or video we will see Responsive UI Design CSS Card Hover Effect. You will use this Responsive UI Design CSS Card on your website freely. If you learn How to create this Responsive UI Design CSS 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 Card Hover Effect - Pure Coding</title>
</head>
<body>
<div class="container">
<div class="card">
<div class="front-face">
<div class="imgBox">
<img src="analysis.svg" alt="Analysis">
<h4>Analysis</h4>
</div>
</div>
<div class="back-face">
<div class="content">
<div class="imgBox">
<img src="analysis.svg" alt="Analysis">
</div>
<h4>Analysis</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Magni odit tenetur quisquam quae tempore quaerat.</p>
</div>
</div>
</div>
<div class="card">
<div class="front-face">
<div class="imgBox">
<img src="design.svg" alt="Design">
<h4>Design</h4>
</div>
</div>
<div class="back-face">
<div class="content">
<div class="imgBox">
<img src="design.svg" alt="Design">
</div>
<h4>Design</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Magni odit tenetur quisquam quae tempore quaerat.</p>
</div>
</div>
</div>
<div class="card">
<div class="front-face">
<div class="imgBox">
<img src="development.svg" alt="Development">
<h4>Development</h4>
</div>
</div>
<div class="back-face">
<div class="content">
<div class="imgBox">
<img src="development.svg" alt="Development">
</div>
<h4>Development</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Magni odit tenetur quisquam quae tempore qu.</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;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
width: 1000px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
}
.container .card {
position: relative;
height: 400px;
box-shadow: 0 20px 50px rgba(0,0,0,.1);
overflow: hidden;
}
.container .card .front-face {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: grid;
place-items: center;
padding: 20px;
transform: translateY(0);
transition: .4s;
}
.container .card:hover .front-face {
transform: translateY(-100%);
}
.container .card .front-face .imgBox {
width: 120px;
height: 120px;
}
.container .card .front-face .imgBox img {
width: 100%;
height: 100%;
}
.container .card .front-face .imgBox h4 {
font-size: 1.3rem;
font-weight: 800;
text-align: center;
}
.container .card .back-face {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 20px;
text-align: center;
display: grid;
place-items: center;
color: #FFF;
transition: .4s;
transform: translateY(calc(100% - 5px));
}
.container .card:nth-child(1) .back-face {
background: #ff3579;
}
.container .card:nth-child(2) .back-face {
background: #2ba1ff;
}
.container .card:nth-child(3) .back-face {
background: #c630e0;
}
.container .card:hover .back-face {
transform: translateY(0);
}
.container .card .back-face .content .imgBox {
width: 100%;
height: 80px;
filter: invert(1);
margin-bottom: 20px;
}
.container .card .back-face .content .imgBox img {
width: 100%;
height: 100%;
}
.container .card .back-face .content h4 {
font-size: 1.3rem;
font-weight: 800;
}
.container .card .back-face .content p {
font-size: 1rem;
font-weight: 500;
}
