add product-card hover and active state

This commit is contained in:
anielsen99 2026-03-25 14:52:03 +01:00
parent fa756a8c67
commit a8a07289b6

View File

@ -173,6 +173,20 @@
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
cursor: pointer;
}
.product-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
border-color: #bbbbbb;
}
.product-card:active {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border-color: #ff6a00;
}
.product-top {
@ -211,6 +225,11 @@
height: auto;
object-fit: contain;
border-radius: 10px;
transition: transform 0.4s ease;
}
.product-card:hover .product-image {
transform: scale(1.05);
}
.product-bottom {