4
0
forked from crowetic/commerce

add different approach on hover animation

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

View File

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

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"> <div className="absolute z-10 inset-0 flex items-center justify-center">
<img <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} src={p.images.edges?.[0]?.node.urlXL}
/> />
</div> </div>