add product-card hover and active state
This commit is contained in:
parent
fa756a8c67
commit
a8a07289b6
@ -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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user