home: add product image hover state

components/home/index.js

@@ -23,12 +23,15 @@ export async function HomeProduct({ product }) {
             className={styles.homeProduct}
         >
             {/* TODO: optimize srcset (adjusting based on featured status) */}
-            <Image
+            <div className={styles.image}>
-                src={featuredImage?.url}
+                <Image
-                alt={featuredImage?.altText}
+                    src={featuredImage?.url}
-                width={featuredImage?.width}
+                    alt={featuredImage?.altText}
-                height={featuredImage?.height}
+                    width={featuredImage?.width}
-            />
+                    height={featuredImage?.height}
+                />
+                <div className={styles.hoverOverlay} />
+            </div>
             <div>
                 <p className={styles.title}>{product?.title}</p>
                 {collections && collections.length > 0 && (

components/home/styles.module.scss

@@ -1,5 +1,6 @@
 @use 'styles/_typography';
 @use 'styles/_spacing';
+@use 'styles/_colors';
 
 @mixin home-grid {
     display: grid;
@@ -73,6 +74,36 @@
     .collections {
         @include typography.subheader;
     }
+
+    .image {
+        position: relative;
+
+        .hoverOverlay,
+        img {
+            transition: opacity 200ms;
+        }
+
+        .hoverOverlay {
+            background-color: colors.$black;
+
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+
+            opacity: 0;
+        }
+
+        &:hover {
+            .hoverOverlay {
+                opacity: 1;
+            }
+            img {
+                opacity: 0;
+            }
+        }
+    }
 }
 
 .homeFooter {