<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 60px 0;
}
.section-title {
text-align: center;
color: white;
margin-bottom: 50px;
}
.section-title h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
}
/* Card Style 1: Lift + Shadow */
.hover-card-1 {
border: none;
border-radius: 15px;
overflow: hidden;
transition: all 0.4s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.hover-card-1:hover {
transform: translateY(-15px);
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.hover-card-1 .card-img-wrapper {
overflow: hidden;
height: 250px;
}
.hover-card-1 .card-img-top {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.hover-card-1:hover .card-img-top {
transform: scale(1.1);
}
/* Card Style 2: Zoom + Glow */
.hover-card-2 {
border: none;
border-radius: 15px;
overflow: hidden;
transition: all 0.4s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.hover-card-2:hover {
transform: scale(1.05);
box-shadow: 0 15px 50px rgba(102, 126, 234, 0.5);
}
.hover-card-2 .card-img-wrapper {
overflow: hidden;
height: 250px;
position: relative;
}
.hover-card-2 .card-img-top {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.hover-card-2:hover .card-img-top {
transform: scale(1.15) rotate(2deg);
}
/* Card Style 3: Tilt + Deep Shadow */
.hover-card-3 {
border: none;
border-radius: 15px;
overflow: hidden;
transition: all 0.4s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.hover-card-3:hover {
transform: translateY(-10px) rotateX(5deg);
box-shadow: 0 25px 50px rgba(0,0,0,0.4);
}
.hover-card-3 .card-img-wrapper {
overflow: hidden;
height: 250px;
}
.hover-card-3 .card-img-top {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.hover-card-3:hover .card-img-top {
transform: scale(1.2);
}
/* Card Style 4: Slide Up + Gradient Overlay */
.hover-card-4 {
border: none;
border-radius: 15px;
overflow: hidden;
transition: all 0.4s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
position: relative;
}
.hover-card-4:hover {
transform: translateY(-12px);
box-shadow: 0 18px 45px rgba(0,0,0,0.35);
}
.hover-card-4 .card-img-wrapper {
overflow: hidden;
height: 250px;
position: relative;
}
.hover-card-4 .card-img-top {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.hover-card-4:hover .card-img-top {
transform: scale(1.15);
}
.hover-card-4 .card-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%);
opacity: 0;
transition: opacity 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
}
.hover-card-4:hover .card-overlay {
opacity: 1;
}
.hover-card-4 .overlay-text {
color: white;
font-size: 1.2rem;
font-weight: 700;
transform: translateY(20px);
transition: transform 0.4s ease;
}
.hover-card-4:hover .overlay-text {
transform: translateY(0);
}
/* General Card Styles */
.card {
background: white;
}
.card-body {
padding: 25px;
}
.card-title {
font-size: 1.4rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 12px;
}
.card-text {
color: #7f8c8d;
line-height: 1.6;
margin-bottom: 20px;
}
.btn-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
color: white;
padding: 10px 25px;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-card:hover {
transform: translateX(5px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
color: white;
}
.badge-custom {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
}
</style>
<div class="container">
<div class="section-title">
<h2>Card Hover Effects</h2>
<p>Hover over each card to see different animation styles</p>
</div>
<div class="row g-4">
<!-- Card 1: Lift + Shadow -->
<div class="col-lg-3 col-md-6">
<div class="card hover-card-1">
<div class="card-img-wrapper">
<div class="card-img-top" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"></div>
</div>
<div class="card-body">
<span class="badge-custom">Featured</span>
<h5 class="card-title mt-2">Lift Effect</h5>
<p class="card-text">Card lifts up with deep shadow on hover. Image zooms smoothly.</p>
<a href="#" class="btn btn-card">Learn More</a>
</div>
</div>
</div>
<!-- Card 2: Zoom + Glow -->
<div class="col-lg-3 col-md-6">
<div class="card hover-card-2">
<div class="card-img-wrapper">
<div class="card-img-top" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);"></div>
</div>
<div class="card-body">
<span class="badge-custom">Popular</span>
<h5 class="card-title mt-2">Zoom & Glow</h5>
<p class="card-text">Entire card scales up with a glowing shadow effect.</p>
<a href="#" class="btn btn-card">Learn More</a>
</div>
</div>
</div>
<!-- Card 3: Tilt + Deep Shadow -->
<div class="col-lg-3 col-md-6">
<div class="card hover-card-3">
<div class="card-img-wrapper">
<div class="card-img-top" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);"></div>
</div>
<div class="card-body">
<span class="badge-custom">Trending</span>
<h5 class="card-title mt-2">Tilt Effect</h5>
<p class="card-text">3D tilt animation with perspective and deep shadow.</p>
<a href="#" class="btn btn-card">Learn More</a>
</div>
</div>
</div>
<!-- Card 4: Overlay -->
<div class="col-lg-3 col-md-6">
<div class="card hover-card-4">
<div class="card-img-wrapper">
<div class="card-img-top" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);"></div>
<div class="card-overlay">
<div class="overlay-text">View Details</div>
</div>
</div>
<div class="card-body">
<span class="badge-custom">New</span>
<h5 class="card-title mt-2">Overlay Effect</h5>
<p class="card-text">Gradient overlay appears with text on hover.</p>
<a href="#" class="btn btn-card">Learn More</a>
</div>
</div>
</div>
</div>
<!-- Second Row with More Examples -->
<div class="row g-4 mt-2">
<div class="col-lg-3 col-md-6">
<div class="card hover-card-1">
<div class="card-img-wrapper">
<div class="card-img-top" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);"></div>
</div>
<div class="card-body">
<span class="badge-custom">Design</span>
<h5 class="card-title mt-2">Creative Project</h5>
<p class="card-text">Modern design with stunning visual effects and animations.</p>
<a href="#" class="btn btn-card">View Project</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card hover-card-2">
<div class="card-img-wrapper">
<div class="card-img-top" style="background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);"></div>
</div>
<div class="card-body">
<span class="badge-custom">Development</span>
<h5 class="card-title mt-2">Web Application</h5>
<p class="card-text">Full-stack solution with modern technology stack.</p>
<a href="#" class="btn btn-card">View Project</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card hover-card-3">
<div class="card-img-wrapper">
<div class="card-img-top" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);"></div>
</div>
<div class="card-body">
<span class="badge-custom">Marketing</span>
<h5 class="card-title mt-2">Brand Identity</h5>
<p class="card-text">Complete branding package with logo and guidelines.</p>
<a href="#" class="btn btn-card">View Project</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card hover-card-4">
<div class="card-img-wrapper">
<div class="card-img-top" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);"></div>
<div class="card-overlay">
<div class="overlay-text">Explore More</div>
</div>
</div>
<div class="card-body">
<span class="badge-custom">Photography</span>
<h5 class="card-title mt-2">Visual Story</h5>
<p class="card-text">Stunning photography collection with artistic vision.</p>
<a href="#" class="btn btn-card">View Project</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
No comments yet. Be the first!