forked from crowetic/commerce
add different approach on hover animation
This commit is contained in:
parent
c28b7589d3
commit
8078c0b832
@ -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 {
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user