Hover animation

Author: w3bdesign

src/components/Product/SingleProduct.component.tsx

@@ -42,7 +42,7 @@ const SingleProduct = ({ product }: IProductRootObject) => {
   if (process.browser) {
     DESCRIPTION_WITHOUT_HTML = new DOMParser().parseFromString(
       description,
-      'text/html'
+      'text/html',
     ).body.textContent;
   }
 
@@ -58,17 +58,19 @@ const SingleProduct = ({ product }: IProductRootObject) => {
         <div className="container mx-auto px-4 py-8">
           <div className="flex flex-col md:grid md:grid-cols-2 md:gap-8">
             {/* Image Container */}
-            <div className="mb-6 md:mb-0">
-              <img
-                id="product-image"
-                src={
-                  image?.sourceUrl ||
-                  process.env.NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL ||
-                  placeholderFallBack
-                }
-                alt={name}
-                className="w-full h-auto object-cover transition duration-500 ease-in-out transform md:hover:scale-105"
-              />
+            <div className="mb-6 md:mb-0 group">
+              <div className="max-w-xl mx-auto aspect-[3/4] relative overflow-hidden bg-gray-100">
+                <img
+                  id="product-image"
+                  src={
+                    image?.sourceUrl ||
+                    process.env.NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL ||
+                    placeholderFallBack
+                  }
+                  alt={name}
+                  className="w-full h-full object-cover object-center transition duration-300 group-hover:scale-105"
+                />
+              </div>
             </div>
 
             {/* Product Details Container */}
@@ -126,14 +128,16 @@ const SingleProduct = ({ product }: IProductRootObject) => {
                     id="variant"
                     name="variant"
                     className="w-full px-4 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                    onChange={(e) => setSelectedVariation(Number(e.target.value))}
+                    onChange={(e) =>
+                      setSelectedVariation(Number(e.target.value))
+                    }
                   >
                     {product.variations.nodes.map(
                       ({ id, name, databaseId, stockQuantity }) => (
                         <option key={id} value={databaseId}>
                           {name.split('- ').pop()} - ({stockQuantity} på lager)
                         </option>
-                      )
+                      ),
                     )}
                   </select>
                 </div>