From d5f8c6633edd758e57350867c1f829d0bc5acd30 Mon Sep 17 00:00:00 2001
From: andr-ew <andrewcshike@gmail.com>
Date: Wed, 26 Jul 2023 22:00:27 -0500
Subject: [PATCH] home: add product image hover state

---
 components/home/index.js           | 15 +++++++++------
 components/home/styles.module.scss | 31 ++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/components/home/index.js b/components/home/index.js
index 185b592ac..cd255698e 100644
--- a/components/home/index.js
+++ b/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
-                src={featuredImage?.url}
-                alt={featuredImage?.altText}
-                width={featuredImage?.width}
-                height={featuredImage?.height}
-            />
+            <div className={styles.image}>
+                <Image
+                    src={featuredImage?.url}
+                    alt={featuredImage?.altText}
+                    width={featuredImage?.width}
+                    height={featuredImage?.height}
+                />
+                <div className={styles.hoverOverlay} />
+            </div>
             <div>
                 <p className={styles.title}>{product?.title}</p>
                 {collections && collections.length > 0 && (
diff --git a/components/home/styles.module.scss b/components/home/styles.module.scss
index 33b29b7a4..5c7a212a3 100644
--- a/components/home/styles.module.scss
+++ b/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 {