Carousel controlls no longer interfere with cards css animations

public/css/home.css

@@ -183,8 +183,8 @@ button:hover
   height: 3em;
   width: 100%;
   position: relative;
-  z-index: 5;
   top: -15.5em;
+  visibility: hidden;
   justify-content: space-between;
 }
 .carousel
@@ -193,6 +193,7 @@ button:hover
   align-items: center;
   width: 90%;
   overflow: hidden;
+  z-index: 1;
 }
 .cards-container
 {
@@ -244,9 +245,11 @@ button:hover
   height: 3em;
   width: 3em;
   display: flex;
+  visibility:visible;
   flex-direction: row;
   justify-content: center;
   gap: 2px;
+  z-index: 10;
   /* align-content: center; */
   align-items: center;
 }
@@ -263,6 +266,7 @@ button:hover
   overflow: hidden;
   border: 2px solid var(--border);
   cursor: pointer;
+  z-index: 1;
   box-shadow: 0px 13px 10px -7px rgba(0, 0, 0,0.1);
 }
 
@@ -302,6 +306,7 @@ button:hover
   justify-content: space-around;
   cursor: pointer;
   overflow: hidden;
+  transform: translateY(5em);
 }
 
 .card__title {
@@ -317,11 +322,50 @@ button:hover
 .card:hover > .card__info 
 {
   background-color: var(--lbgT);
+  transition: transform 0.5s ease;
+  transform: translateY(0em);
+}
+
+.card > .card__info > h2
+{
+  margin: 0;
+  margin-top: 1em;
+  font-size: large
+}
+.card > .card__info > h3
+{
+  margin: 0;
+  margin-bottom: 1.5em;
+  font-size: medium;
+}
+.card > .card__info > .tags
+{
+  margin-bottom: 0em;
+}
+.card > .card__info > .desc
+{
+  font-size: x-small;
 }
 .card:hover > .card__img
 {
   height: 100%;
 }
+.card > .card__info > .tags
+{
+  display:flex;
+  flex-direction: row;
+  justify-content: left;
+  align-self: center;
+  gap:5px;
+}
+.card > .card__info > .tags > .tag
+{
+  border: 1px solid var(--border);
+  border-radius: 15px;
+  background-color: var(--accent);
+  padding-left: 0.2em;
+  padding-right: .2em;
+}
 .infoCard
 {
   height: 15em;

views/searchCards.ejs

@@ -1,6 +1,12 @@
 <article class="card">
     <% let scanlatorID = scan.scanlator.replace('-', '') %> 
-    <div class="card__img  img_<%=scanlatorID %>" style="background-image: url(<%=result.img%>)">
+    <div 
+        class="card__img  img_<%=scanlatorID %>" 
+        style="background-image: url(<%=result.img%>)"
+        hx-get="/manga/<%= scanlator %>/<%=result.link?encodeURIComponent(result.link):'nolink'%>/<%= result.title %>" 
+        hx-target="#container" 
+        hx-trigger="click"
+    >
         <% if(result.favorite){%>
             <%-include('bookmarked.ejs', {scanlator, title:result.title, link:encodeURIComponent(result.link), id:result.favorite})  %> 
         <% } else { %>
@@ -8,13 +14,17 @@
         <% } %>  
         <%- include('status.ejs', {status:result.Status}) %> 
     </div>
-    <div 
-        class="card__info" 
-        hx-get="/manga/<%= scanlator %>/<%=result.link?encodeURIComponent(result.link):'nolink'%>/<%= result.title %>" 
-        hx-target="#container" 
-        hx-trigger="click"
-    >
-      <h3 class="card__title"><%= result.title %> </h3>
-      <p> Latest Chapter: <%= result.latestChap %> </p>
+    <div class="card__info">
+        <h2 class="card__title"><%= result.title %></h2>
+        <h3 class="chapter">Latest Chapter • <%= result.latestChap %> </h3>
+        <div class="tags">
+            <% for(let [index, tag] of result.tags.entries()) {%> 
+                <% if(index >= 3) continue %> 
+                <span class="tag"><%= tag.slice(0, 5)+(tag.length>5?'...':'')%></span>
+            <% } %> 
+        </div>
+        <p class="desc">
+            <%= result.description.slice(0,100)+(result.description.length>100?'...':'') %> 
+        </p>
     </div>
-</article>
+</article>