From 4e52bf65b38c09183a2b56c8ead20d13b4765e9a Mon Sep 17 00:00:00 2001
From: Ivan Evans <74743263+Pasithea0@users.noreply.github.com>
Date: Tue, 6 Aug 2024 11:26:29 -0600
Subject: [PATCH] (Enabled on hover) Added new css class

---
 src/components/media/MediaCard.tsx | 5 ++++-
 src/components/utils/Flare.css     | 9 +++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
index f4463e81..fb29d5e4 100644
--- a/src/components/media/MediaCard.tsx
+++ b/src/components/media/MediaCard.tsx
@@ -142,7 +142,10 @@ function MediaCardContent({
             </>
           ) : null}
 
-          <div className="absolute" onClick={(e) => e.preventDefault()}>
+          <div
+            className="absolute bookmark-button"
+            onClick={(e) => e.preventDefault()}
+          >
             <MediaBookmarkButton media={media} />
           </div>
 
diff --git a/src/components/utils/Flare.css b/src/components/utils/Flare.css
index 1c17cda8..b46bdbc6 100644
--- a/src/components/utils/Flare.css
+++ b/src/components/utils/Flare.css
@@ -5,3 +5,12 @@
 .hover\:flare-enabled:hover .flare-light {
   opacity: 1 !important;
 }
+
+.bookmark-button {
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.group:hover .bookmark-button {
+  opacity: 1;
+}