Animated Hover Cards
How to EDIT this code ?
To edit the Title of the Animated card , 6th line from the bottom , is the place where the Header text is
You can Go ahead and change the text from Click to Download Button , to whatever you wantTo edit the description , 5th line from the bottom , is the plavce where the decription text is
You can go ahead and change the text from Make your site more accessible to people to whatever you want
Click here to copy The code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library Card</title>
<!-- Link to Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap" rel="stylesheet">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: transparent; /* Set outer background to transparent */
margin: 0;
font-family: 'Poppins', sans-serif; /* Default font family */
}
.card {
display: flex;
flex-direction: column; /* Arrange children in a column */
align-items: center;
background-color: white; /* Background color for the card */
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 300px;
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease; /* Add transition for smooth animation */
}
.card:hover {
transform: scale(1.05); /* Slightly enlarge the card */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add a deeper shadow */
background-color: black; /* Change background color to black */
color: white; /* Change text color to white */
}
.content {
text-align: center; /* Center align the text */
}
.content h2 {
margin: 10px 0 0;
font-size: 1.5em;
font-weight: 700; /* Poppins bold */
transition: color 0.3s ease; /* Smooth transition for text color */
}
.content p {
margin: 5px 0 0;
color: #555;
font-weight: 300; /* Poppins light */
transition: color 0.3s ease; /* Smooth transition for text color */
}
.card:hover .content h2,
.card:hover .content p {
color: white; /* Change text color to white on hover */
}
</style>
</head>
<body>
<div class="card">
<div class="content">
<h2>Click to Download Button</h2>
<p>Make your site more accessible to people</p>
</div>
</div>
</body>
</html>