Learn how to create stylish hover effects for cards using HTML and CSS in this tutorial. Watch step-by-step as we implement eye-catching animations to make your website's cards stand out. Perfect for web developers looking to enhance user experience and add a touch of interactivity to their projects. Get ready to impress with cool hover effects for cards!
Stay tuned for more web development tutorials.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<img src="Image/paris_eiffeltower_ssk500.jpeg" alt="EiffelTower">
<div class="card-content">
<h1 class="title">Eiffel Tower</h1>
<p class="sub-title">Tower in Paris, France
</p>
<p class="text">The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower from 1887 to 1889</p>
<button class="card-button">Visit More</button>
</div>
</div>
</body>
</html>
style.css
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Times New Roman', Times, serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
background: rgb(30, 63, 113);
height: 100vh;
width: 100%;
}
.card{
height: 500px;
width: 350px;
border: 5px solid black;
border-radius: 25px;
position: relative;
overflow: hidden;
}
.card img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius:20px ;
}
.card-content{
width: 100%;
height: 100%;
position: absolute;
right:-100%;
top: 0;
background-color: rgb(22, 65, 100);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 40px;
transition: 0.5s;
}
.card:hover .card-content{
right: 0;
}
.title{
font-size: 1.8em;
color: white;
text-align: center;
}
.sub-title{
font-size: 1.5em;
color: antiquewhite;
text-align: center;
}
.text{
color: aqua;
padding-top: 25px;
text-align: center;
font-size: 1.2em;
}
.card-button{
color:white ;
background:rgb(16, 35, 64) ;
margin: 35px 80px;
padding: 10px;
border-radius: 10px;
font-size: 1.1em;
cursor: pointer;
}
Comments
Post a Comment