FSST/Geizkragen
FSST/Geizkragen
2
0
Fork 0
Code Issues Projects 1 Releases 1 Wiki Activity

Enhance product card hover effects for improved interactivity and visual appeal in compcard.css

Browse Source
This commit is contained in:
Fabian Schieder 2026-03-31 00:44:17 +02:00
parent c388447cd5
commit 0722c2d5de
1 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
assets/css/compcard.css
View File

@ -17,8 +17,8 @@
border: 1px solid var(--border-subtle); border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
overflow: hidden; overflow: hidden;
box-shadow: var(--shadow-sm); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: all var(--transition-smooth); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 270px; min-height: 270px;
@ -67,8 +67,8 @@
} }
.product-card:hover { .product-card:hover {
transform: translateY(2px); transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
border-color: transparent; border-color: transparent;
} }
@ -106,13 +106,14 @@
background: #ffffff; background: #ffffff;
padding: 16px; padding: 16px;
border-bottom: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
transition: transform var(--transition-smooth); transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.4s ease;
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
.product-card:hover img { .product-card:hover img {
transform: scale(1.05); transform: scale(1.12) rotate(-1.5deg);
filter: brightness(1.05);
} }
/* ─── Card Content ─── */ /* ─── Card Content ─── */