CSS Card Hover Effects Collection
Build 15 interactive card hover effects with transitions, transforms, and perspective.
CSSHover EffectsTransitionsCards
Overview
Build 15 interactive card hover effects with transitions, transforms, and perspective.
HTML Structure
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Card Hover Effects Collection</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<header class="header">
<h1>CSS Card Hover Effects Collection</h1>
</header>
<main class="content">
<div class="card">
<div class="card-body">
<h2 class="card-title">Example Component</h2>
<p class="card-text">Demonstrating modern CSS techniques.</p>
</div>
</div>
</main>
</div>
</body>
</html>Core Styles
css
/* Custom Properties */
:root {
--color-primary: #6366f1;
--color-secondary: #8b5cf6;
--color-surface: #ffffff;
--color-text: #1e293b;
--radius: 12px;
--shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
--transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Base Layout */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
/* Card Component */
.card {
background: var(--color-surface);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}
.card-body {
padding: 1.5rem;
}
.card-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 0.5rem;
}
/* Responsive Grid */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
/* Dark Mode */
@media (prefers-color-scheme: dark) {
:root {
--color-surface: #1e293b;
--color-text: #f8fafc;
}
}Advanced Techniques
css
/* Animated gradient border */
.gradient-border {
position: relative;
padding: 3px;
border-radius: var(--radius);
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}
.gradient-border::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
filter: blur(12px);
opacity: 0;
transition: opacity var(--transition);
z-index: -1;
}
.gradient-border:hover::before {
opacity: 0.6;
}
/* Scroll-driven animation */
@keyframes fade-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-on-scroll {
animation: fade-in linear both;
animation-timeline: view();
animation-range: entry 0% entry 100%;
}Browser Support
- Modern Evergreen browsers
- CSS custom properties: 95%+ support
- Container queries: 90%+ support
- \@layer\ cascade layers: 93%+ support
Tags
- CSS - Hover Effects - Transitions - Cards
Related Projects
CSSNov 19, 2024
CSS Responsive Email Template
Build a cross-client email template with table layouts, inline styles, and media queries.
CSSEmailResponsiveTemplate
Read more → Source
CSSNov 15, 2024
CSS Clip-Path Shape Morphing
Create animated shape transitions using clip-path polygons and CSS transitions.
CSSClip-PathShapesAnimation
Read more → Source
CSSNov 11, 2024
CSS Gradient Pattern Backgrounds
Generate repeating geometric patterns using CSS gradients without any image files.
CSSGradientsPatternsBackgrounds
Read more → Source
Comments (0)
No comments yet. Be the first to comment!