hasicicsalih/parfum_agsd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add product-card hover and active state

Browse Source
This commit is contained in:
anielsen99 2026-03-25 14:52:03 +01:00
parent fa756a8c67
commit a8a07289b6
1 changed files with 19 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
parfum-shop/src/App.css
View File

@ -173,6 +173,20 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; 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 { .product-top {
@ -211,6 +225,11 @@
height: auto; height: auto;
object-fit: contain; object-fit: contain;
border-radius: 10px; border-radius: 10px;
transition: transform 0.4s ease;
}
.product-card:hover .product-image {
transform: scale(1.05);
} }
.product-bottom { .product-bottom {