Create an animated card in HTML & CSS
To change the styling of a card based on the element's hover state, focus state, or any of its descendants state, use the pseudo-class selectors :hover and :focus-within.
Using overflow:hidden, hide the extra content of the card and show it on hover.
HTML 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>Animated Card</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="background-image"></div>
<div class="card">
<img src="https://images.wallpaperscraft.com/image/single/honda_s2000_honda_car_322685_1280x720.jpg"/>
<h3>Hover Me</h3>
<div class="focus-content">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet quia fugit labore dolores sint reiciendis perspiciatis<br/>
</div>
</div>
</body>
</html>
CSS Code
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.background-image {
position: fixed;
left: 0;
right: 0;
display: block;
background-image: url(https://images.wallpaperscraft.com/image/single/honda_s2000_honda_car_322685_1280x720.jpg);
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
width: 100%;
height: 100%;
background-size: cover;
}
.card {
width: 300px;
height: 280px;
padding: 0;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
border-radius: 8px;
box-sizing: border-box;
overflow: hidden;
background-color: #fff;
z-index: 1;
}
.card * {
transition: 0.3s ease all;
}
.card img {
margin: 0;
width: 300px;
height: 224px;
object-fit: cover;
display: block;
}
.card h3 {
margin: 0;
padding: 12px 12px 48px;
line-height: 32px;
font-weight: 500;
font-size: 20px;
}
.card .focus-content {
display: block;
padding: 8px 12px;
}
.card p {
margin: 0;
line-height: 1.5;
}
.card:hover img, .card:focus-within img {
margin-top: -80px;
}
.card:hover h3, .card:focus-within h3 {
padding: 8px 12px 0;
}
Top comments (0)