Hello fellow developers !!!
Transform your web design instantly with mesmerizing Card Hover Effects using just HTML and CSS. No complex scripts—just copy, paste, and watch the magic happen!
Feel free to adjust the text further to suit your preferences!!!
Preview
Image :- Add Your Preferred Image
HTML Code Structure :-
index.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> Card Hover Effect </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-div">
<div class="card">
<div class="imgbox">
<img src="./card-Image.webp" alt="Image">
</div>
<div class="content">
<h2>Keep Smiling</h2>
<p>Smiling is a simple act with profound effects. It not only lifts your spirits but also radiates positivity to those around you. So, in the journey of life, don't forget to pack your smile – a universal language that speaks volumes of joy and resilience.</p>
</div>
</div>
<div class="card">
<div class="imgbox">
<img src="./card-Image.webp" alt="">
</div>
<div class="content">
<h2>Stay Healthy</h2>
<p>Prioritize your well-being with good nutrition, regular exercise, and sufficient rest. A healthy lifestyle is the foundation for a fulfilling and vibrant life. Take care of your body, and it will take care of you.</p>
</div>
</div>
<div class="card">
<div class="imgbox">
<img src="./card-Image.webp" alt="">
</div>
<div class="content">
<h2>Stay Safe</h2>
<p>Prioritize safety in your daily choices, whether it's at home, work, or in your travels. Simple precautions can make a big difference. Stay vigilant, be aware.</p>
</div>
</div>
</div>
</body>
</html>
CSS Code Structure :-
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(1, 130, 89);
}
.card {
margin: 0 2rem 0 2rem;
position: relative;
width: 300px;
height: 200px;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
padding: 30px;
transition: .3s;
background-color: #fff;
cursor: pointer;
}
.card:hover {
height: 350px;
transition: .3s;
}
.card:hover .content {
transform: translateY(-170px);
opacity: 1;
}
.imgbox {
position: relative;
width: 100%;
height: 100%;
z-index: 99;
}
img {
width: 100%;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
transform: translateY(-80px);
}
.content {
transition: .3s;
transform: translateY(-350px);
text-align: center;
opacity: 0;
}
.content h2 {
margin-bottom: 0.3rem;
}
.main-div {
width: 100%;
height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
Unleash Your Imagination
But why stop there? We encourage you to modify and customize the code, infusing your unique style and personality into the design. Tweak colors, experiment with transitions, and let your creativity run wild. The web is your canvas—paint it with your flair!
Caution: May Cause User Engagement Overload
Be prepared for an influx of positive reactions from your users. The hover effects not only add a touch of interactivity but also create an immersive experience that keeps visitors hooked. Say goodbye to mundane interfaces and hello to a dynamic web presence!
Ready to Dive In?
Without further ado, let's jump into the code and elevate your website to new heights. Copy, paste, and watch the magic unfold. Your users will thank you for the delightful visual treat!
Happy coding, explorers !!!
Follow Us