add gradient on hover

donovangg · Mar 26, 2024 · b338588 · b338588
1 parent 652203c
commit b338588
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 6 deletions.
diff --git a/src/components/ResourceCard.astro b/src/components/ResourceCard.astro
@@ -2,11 +2,11 @@
 const { title, link, category, imgSrc, id, description } = Astro.props;
 ---
 
-<article
-  class="max-w-sm rounded overflow-hidden bg-zinc-800 hover:bg-zinc-700 shadow-lg"
+<!-- <article
+  class="max-w-sm rounded overflow-hidden bg-zinc-800 border border-gray-800 p-[1px] backdrop-blur-3xl"
 >
-  <a href={link} target="_blank">
-    <img class="w-full" src={imgSrc} alt={`The resource ${link}`} />
+  <a href={a} target="_blank">
+    <img class="w-full" src={imgSrc} alt={`The resource ${a}`} />
     <div class="px-6 py-4">
       <h3 class="font-bold text-neutral-200 text-xl mb-2">{title}</h3>
     </div>
@@ -17,4 +17,34 @@ const { title, link, category, imgSrc, id, description } = Astro.props;
       >
     </div>
   </a>
-</article>
+</article> -->
+<div class="relative selection:bg-pink-600 group">
+  <div
+    class="absolute -inset-0.5 hover:bg-gradient-to-r from-pink-600 to bg-violet-600 rounded-lg blur opacity-0 group-hover:opacity-100 transition duration-200"
+  >
+  </div>
+  <article
+    class="relative max-w-sm flex flex-col rounded-lg bg-zinc-800 border-gray-700 shadow-md"
+  >
+    <div class="flex-1">
+      <a href={link}>
+        <img class="rounded-t-lg w-full" src={imgSrc} alt="" />
+      </a>
+    </div>
+    <div class="flex-1 p-4">
+      <a href={link}>
+        <h2
+          class="mb-2 text-2xl group-hover:text-gray-100 transition duration font-bold tracking-tight text-gray-100"
+        >
+          {title}
+        </h2>
+      </a>
+      <a
+        href={link}
+        class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-violet-700 rounded-lg hover:bg-violet-800 focus:ring-4 focus:outline-none focus:ring-blue-300"
+      >
+        Check this out
+      </a>
+    </div>
+  </article>
+</div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -17,7 +17,7 @@ interface Props {
 
 <Layout title="Fighting Game Resources Ughara">
   <section
-    class="border-2 w-11/12 mx-auto grid place-items-center gap-4 lg:grid-cols-4 border-green-700"
+    class="border-2 w-11/12 mx-auto grid place-items-center lg:grid-cols-4 border-green-700"
   >
     {
       resources.map((res) => (