From ec838fd4e62d5d52240b04f3040f3967ba992554 Mon Sep 17 00:00:00 2001
From: Rein van Haaren <rein@reinvanhaaren.nl>
Date: Tue, 8 Aug 2023 23:12:51 +0200
Subject: [PATCH] Adds group hover on grid tile image + labels (#1163)

---
 components/grid/tile.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/grid/tile.tsx b/components/grid/tile.tsx
index cf9aa49a9..f79a459f4 100644
--- a/components/grid/tile.tsx
+++ b/components/grid/tile.tsx
@@ -20,7 +20,7 @@ export function GridTileImage({
   return (
     <div
       className={clsx(
-        'flex h-full w-full items-center justify-center overflow-hidden rounded-lg border bg-white hover:border-blue-600 dark:bg-black',
+        'group flex h-full w-full items-center justify-center overflow-hidden rounded-lg border bg-white hover:border-blue-600 dark:bg-black',
         {
           relative: label,
           'border-2 border-blue-600': active,
@@ -32,7 +32,7 @@ export function GridTileImage({
         // eslint-disable-next-line jsx-a11y/alt-text -- `alt` is inherited from `props`, which is being enforced with TypeScript
         <Image
           className={clsx('relative h-full w-full object-contain', {
-            'transition duration-300 ease-in-out hover:scale-105': isInteractive
+            'transition duration-300 ease-in-out group-hover:scale-105': isInteractive
           })}
           {...props}
         />