From 11951e396ae109375875fe8784af139e8ee6a3ab Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Wed, 7 Dec 2022 20:06:25 +0300
Subject: [PATCH] set album color as img hover bg

---
 src/components/shared/AlbumCard.vue | 32 ++++++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/shared/AlbumCard.vue b/src/components/shared/AlbumCard.vue
index f1d8794e..c826d5ed 100644
--- a/src/components/shared/AlbumCard.vue
+++ b/src/components/shared/AlbumCard.vue
@@ -6,8 +6,14 @@
     }"
     class="album-card"
   >
-    <div class="with-img">
-      <img class="rounded-sm shadow-lg" :src="imguri + album.image" alt="" />
+    <div class="with-img rounded-sm no-scroll">
+      <div
+        class="gradient"
+        :style="{
+          background: `linear-gradient(to top, ${album.colors[0]} 20%, transparent)`,
+        }"
+      ></div>
+      <img class="shadow-lg" :src="imguri + album.image" alt="" />
       <PlayBtn
         :store="useAlbumStore"
         :source="playSources.album"
@@ -53,18 +59,34 @@ defineProps<{
   gap: $small;
   padding: $medium;
   border-radius: 1rem;
-  height: fit-content;
-  position: relative;
 
   .with-img {
     position: relative;
-    padding: 0;
+
+    img {
+      display: block;
+    }
+
+    .gradient {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+    }
 
     &:hover {
       .play-btn {
         transform: translateY(0);
         opacity: 1;
       }
+
+      img {
+        border-radius: 0 0 $medium $medium;
+      }
+
+      .gradient {
+        opacity: 1;
+      }
     }
   }