From 143f8d799a5aece1e7a5a05b02d4ae9596536f08 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Wed, 15 Mar 2023 13:12:08 +0100
Subject: [PATCH] Hover effect on images

---
 src/dashboardWebView/components/Contents/Item.tsx | 2 +-
 src/dashboardWebView/components/Media/Item.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/dashboardWebView/components/Contents/Item.tsx b/src/dashboardWebView/components/Contents/Item.tsx
index 74f90686..e5782eaa 100644
--- a/src/dashboardWebView/components/Contents/Item.tsx
+++ b/src/dashboardWebView/components/Contents/Item.tsx
@@ -117,7 +117,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
               <img
                 src={`${pageData[PREVIEW_IMAGE_FIELD]}`}
                 alt={escapedTitle}
-                className="absolute inset-0 h-full w-full object-cover"
+                className="absolute inset-0 h-full w-full object-cover group-hover:brightness-75"
                 loading="lazy"
               />
             ) : (
diff --git a/src/dashboardWebView/components/Media/Item.tsx b/src/dashboardWebView/components/Media/Item.tsx
index 794ebebf..ca17991d 100644
--- a/src/dashboardWebView/components/Media/Item.tsx
+++ b/src/dashboardWebView/components/Media/Item.tsx
@@ -447,7 +447,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
             {renderMediaIcon}
           </div>
           <div
-            className={`absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center`}
+            className={`absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center group-hover:brightness-75`}
           >
             {renderMedia}
           </div>