fix: blurred bg image cover on quib component

quibble-dev · Dec 29, 2024 · 7be9d9d · 7be9d9d
1 parent 9caea8b
commit 7be9d9d
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/frontend/src/lib/components/quib.svelte b/frontend/src/lib/components/quib.svelte
@@ -45,8 +45,13 @@
     </p>
   {:else}
     <div
-      class="relative flex max-h-[20rem] cursor-pointer justify-center overflow-hidden rounded-2xl inner-border inner-border-base-content/15"
+      class="relative z-10 flex max-h-[25rem] cursor-pointer justify-center overflow-hidden rounded-2xl inner-border inner-border-base-content/15"
     >
+      <!-- blurred img -->
+      <div
+        class="absolute inset-0 -z-10 scale-150 bg-cover bg-center opacity-50 blur-xl"
+        style="background-image: url({quib.cover});"
+      ></div>
       <img src={quib.cover} alt="" class="object-contain" />
     </div>
   {/if}