Hey friends, today we will see how to make a cool CSS Card with hover effect. Do watch my YouTube tutorial below for better understanding and clarity.
When the user hovers the card, a partially hidden glassmorphism box will slide up to reveal it's content. Then when the mouse is hovered away, the box moves down again.
My video tutorial and demo is below:
Paste the code below in your HTML file and download the image below too.
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free 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>CSS Cards with Hover Effects | CodingPorium</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: 'poppins',sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
background:linear-gradient(90deg, hsla(239,100%,67%,1)0%, hsla(187,100%,89%,1)100%);
height:100vh;
}
.card{
width:300px;
height:225px;
background:rgb(0,87,128);
position:relative;
border-radius:20px;
cursor:pointer;
box-shadow: 0 0 20px rgba(0,0,0,0.123);
}
.card img{
position:absolute;
width:100%;
border-radius: 10px;
height: 225px;
}
.box{
position: absolute;
width:100%;
bottom:0;
height: 50px;
padding:0.4em 1.5em;
font-size: 14px;
background: rgba(255,255,255,0);
backdrop-filter: blur(10px);
border-radius:10px;
transform:scale(0.9);
color:white;
border:1px solid rgba(255,255,255,0.164);
box-shadow: 0 0 20px rgba(0,0,0,0.144);
overflow:hidden;
transition: all .4s;
}
.box p{
font-size:1em;
}
.card:hover .box{
height: 100px;
}
</style>
<body>
<div class="card">
<img src="developerphone.jpg" alt="">
<div class="box">
<h2>Developer</h2>
<p>As a developer, you probably would have expected to see some lorem ipsum text here but I decided
to make this more interesting by not using lorem ipsum text.
</p>
</div>
</div>
</body>
</html>
For the image, right click the image below and click save image to download it.
And that's all for this post. Thanks for reading and do subscribe to our YouTube channel to support us.
Till the next one, goodbye!
Post a Comment