diff --git a/components/core/EnhancedImage/EnhancedImage.module.css b/components/core/EnhancedImage/EnhancedImage.module.css new file mode 100644 index 000000000..9caafc3be --- /dev/null +++ b/components/core/EnhancedImage/EnhancedImage.module.css @@ -0,0 +1,14 @@ +.root { + @apply transform transition-transform duration-500; + height: 100%; + margin: auto; + + &:hover { + transform: scale(1.05); + } + + & div { + height: 100%; + margin: auto; + } +} diff --git a/components/core/EnhancedImage/EnhancedImage.tsx b/components/core/EnhancedImage/EnhancedImage.tsx index 3ff97224b..ceae4918b 100644 --- a/components/core/EnhancedImage/EnhancedImage.tsx +++ b/components/core/EnhancedImage/EnhancedImage.tsx @@ -1,6 +1,7 @@ import { FC } from 'react' import { useInView } from 'react-intersection-observer' import Image from 'next/image' +import s from './EnhancedImage.module.css' type Props = Omit< JSX.IntrinsicElements['img'], @@ -33,7 +34,7 @@ const EnhancedImage: FC = ({ }) return ( -
+
) diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index a289cc1df..1276a7c0b 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -122,9 +122,3 @@ .wishlistButton { @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold text-xs leading-6 cursor-pointer; } - -.product-image { - position: absolute; - width: 100%; - height: 100%; -} diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index d48c5b4cf..3f46534d1 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -70,17 +70,15 @@ const ProductCard: FC = ({ variant={p.variants.edges?.[0]!} />
-
- -
+ )