From 2943d90ab1d55aff6492213c4968c4dff5744001 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Mon, 6 Apr 2026 16:46:48 -0400
Subject: [PATCH] fix: show project card images in full color, add hover zoom

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/sections/SelectedWorks.tsx | 24 ++++++++---------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/components/sections/SelectedWorks.tsx b/src/components/sections/SelectedWorks.tsx
index 04eb7dc..390ed8c 100644
--- a/src/components/sections/SelectedWorks.tsx
+++ b/src/components/sections/SelectedWorks.tsx
@@ -188,22 +188,14 @@ function SmallCard({ project, readLabel, t }: { project: Project; readLabel: str
       )}
     >
       <div className="relative overflow-hidden">
-        <div
-          className={cn(
-            'transition-all duration-500',
-            'grayscale group-hover:grayscale-0',
-            'opacity-80 group-hover:opacity-100',
-          )}
-        >
-          <div className="relative w-full aspect-[16/7]">
-            <Image
-              src={project.image}
-              alt={t(`work.projects.${project.i18nKey}.title`)}
-              fill
-              className="object-cover"
-              sizes="(max-width: 768px) 100vw, 33vw"
-            />
-          </div>
+        <div className="relative w-full aspect-[16/7]">
+          <Image
+            src={project.image}
+            alt={t(`work.projects.${project.i18nKey}.title`)}
+            fill
+            className="object-cover transition-transform duration-500 group-hover:scale-[1.03]"
+            sizes="(max-width: 768px) 100vw, 33vw"
+          />
         </div>
       </div>