Hi dear welcome to Ascode Blog . In this post we are going to learn how to makeing css card design with beautifull hover effect . First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the file with your browser.
HTML
<!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>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<div class="background"></div>
<div class="icon"><i class="fab fa-servicestack"></i></div>
<div class="content">
<h1> Services</h1>
<p>LWe are utilizing absolutely secure servers and encryption, every one of your information safe </p>
<a href="#">Read More ></a>
</div>
</div>
<div class="card">
<div class="background"></div>
<div class="icon"><i class="fas fa-signal"></i></div>
<div class="content">
<h1>Constant growth</h1>
<p>Our content increment gainfulness rate step by step </p>
<a href="#">Join Now ></a>
</div>
</div>
<div class="card">
<div class="background"></div>
<div class="icon"><i class="fas fa-id-card-alt"></i></div>
<div class="content">
<h1>Support 24/7</h1>
<p>Our help and customer-support group consistently prepared to support you </p>
<a href="#">Contact ></a>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #FFF;
}
.card {
background: transparent;
width: 350px;
height: 350px;
margin: 10px;
box-shadow: 0 0 5px #ccc;
border-radius: 10px;
text-align: center;
columns: #000;
overflow: hidden;
margin: 10px;
}
.content {
margin: -60px 20px;
}
h1 {
font-size: 25px;
font-weight: 600;
margin: 15px auto ;
text-transform: uppercase;
}
p {
font-size: 18px;
font-weight: 400;
margin: 10px auto ;
}
.icon {
position: relative;
font-size: 2.5rem;
color: rgb(255, 60, 0);
margin: 0 auto;
z-index: 2;
top: -25%;
transition: 0.5s;
}
.background {
width: 100px;
height: 100px;
margin: 0 auto;
/* background: linear-gradient(to bottom,#26d3b6 0,#0e377d 100%); */
background: linear-gradient(45deg, #26d3b6, #0e377d);
border-radius: 0 0 50px 50px;
transform: translateY(-100%);
z-index:-1 ;
transition: 0.5s;
}
a {
text-decoration: none;
font-size: 20px;
font-weight: 600;
padding: 5px 10px;
border-radius: 5px;
margin: 20px auto;
transition: 0.2s;
color: #000;
display: inline-block;
}
a:hover {
background: linear-gradient(to bottom,#26d3b6 0,#0e377d 100%);
color: #fff;
}
.card:hover {
border: 2px solid #f09;
}
.card:hover .background {
transform: translateY(0);
color: #fff;
}
.card:hover .icon {
color: #fff;
}
@media (max-width:600px) {
body {
display: block;
}
.card {
width: 90%;
height: 100%;
}
}
0 Comments