src/components/Card/OverviewCard.astro

@@ -14,7 +14,7 @@ const image = await client.files.getURL(headerImage, headerImage.image)
         src={ image }
     />
 
-    <div id="bottom-info-panel" class="absolute bottom-0 left-0 w-full p-2 h-25 backdrop-filter backdrop-blur-lg rounded-b-xl">
+    <div id="bottom-info-panel" class="absolute bottom-0 left-0 w-full p-2 h-25 backdrop-filter backdrop-blur-lg rounded-b-xl z-1">
         <p id="recipe-name" class="text-[14pt] text-white opacity-90 font-bold" >{recipe.name}</p>
         <p id="recipe-desc" class="text-white text-[10pt]"> {recipe.description} </p>
 
@@ -22,4 +22,10 @@ const image = await client.files.getURL(headerImage, headerImage.image)
             <TagRow tagIds={recipe.tags}/>
         </div>
     </div>
+
+    <a id="link" href={`/recipe/${recipe.id}`} class="absolute inset-0 z-0">
+        <span class="block w-full h-full hover:bg-black/10 transition-colors">
+        </span>
+    </a>
+    
 </div>

src/components/Card/TagRow.astro

@@ -22,12 +22,12 @@ const tags = tagIds && tagIds.length > 0
 <div class="">
     {
         tags.map(tag => (
-            // no hover:bg-white/30 :(
-            <span 
-                class="text-white bg-white/20 px-2 mr-2 mt-2 rounded-md inline-block " 
+            <a 
+                href={`/tag/${tag.id}`}
+                class="text-white bg-white/20 px-2 mr-2 mt-2 rounded-md inline-block hover:bg-white/30" 
             >
                 {tag.name}
-            </span>
+            </a>
         ))
     }
 </div>

src/pages/index.astro

@@ -12,9 +12,7 @@ const recipies = await client.collection("recipes").getFullList()
 	<div class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
 		{
 			recipies.map(r => (
-				<a href={`/recipe/${r.id}`}>
-					<OverviewCard recipe={r} />
-				</a>
+				<OverviewCard recipe={r} />
 			))
 		}
 	</div>