cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

add different approach on hover animation

Browse Source
This commit is contained in:
Franco Arza 2020-10-21 19:51:46 -03:00
parent c28b7589d3
commit 8078c0b832
2 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/product/ProductCard/ProductCard.module.css
View File

@ -35,6 +35,26 @@
&:nth-child(6n + 6) .wishlistButton {
@apply bg-cyan text-white;
}
& .squareBg {
@apply bg-white;
}
&:nth-child(6n + 1) .squareBg {
@apply bg-white;
}
&:nth-child(6n + 5) .squareBg {
@apply bg-white;
}
&:nth-child(6n + 3) .squareBg {
@apply bg-white;
}
&:nth-child(6n + 6) .squareBg {
@apply bg-white;
}
}
&:nth-child(6n + 1) .squareBg {
@ -58,7 +78,7 @@
.productTitle > span,
.productPrice,
.wishlistButton {
@apply transition ease-in-out duration-300;
@apply transition ease-in-out duration-500;
}
.squareBg {

2
components/product/ProductCard/ProductCard.tsx
View File

@ -36,7 +36,7 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
>
<div className="absolute z-10 inset-0 flex items-center justify-center">
<img
className="w-full object-cover transform scale-90 hover:scale-100 transition-transform duration-500"
className="w-full object-cover transform scale-75 hover:scale-90 transition-transform duration-500"
src={p.images.edges?.[0]?.node.urlXL}
/>
</div>