Create hover effect for Poster

src/lib/Poster.svelte

@@ -3,17 +3,59 @@
 
   // export let content: Content;
   export let poster: string;
+  export let title: string;
+  export let desc: string;
+
+  let rating: 1 | 2 | 3 | 4 | 5 | undefined;
+
+  function handleRating(
+    ev: MouseEvent & {
+      currentTarget: EventTarget & HTMLSpanElement;
+    },
+    r: 1 | 2 | 3 | 4 | 5
+  ) {
+    console.log("handleRating", rating);
+    resetRating();
+    rating = r;
+    ev.currentTarget.classList.add("lit");
+  }
+
+  function resetRating() {
+    let ratingsContainer = document.getElementById("rating-container");
+    const stars = ratingsContainer?.querySelectorAll("button");
+    if (!stars) return;
+    for (let i = 0; i < stars.length; i++) {
+      stars[i].classList.remove("lit");
+    }
+    rating = undefined;
+  }
 </script>
 
 <li>
-  <div>
+  <div class="container">
     <img src={poster} alt="poster" />
-    <!-- <span>{content.title}</span> -->
+    <div class="inner">
+      <h2>{title}</h2>
+      <span>{desc}</span>
+
+      <div id="rating-container" class="rating" on:dblclick={resetRating}>
+        <button class="plain" on:click={(ev) => handleRating(ev, 5)}>*</button>
+        <button class="plain" on:click={(ev) => handleRating(ev, 4)}>*</button>
+        <button class="plain" on:click={(ev) => handleRating(ev, 3)}>*</button>
+        <button class="plain" on:click={(ev) => handleRating(ev, 2)}>*</button>
+        <button class="plain" on:click={(ev) => handleRating(ev, 1)}>*</button>
+      </div>
+
+      <div class="btn-container">
+        <button class="secondary">Watching</button>
+        <button>Watched</button>
+      </div>
+    </div>
   </div>
 </li>
 
 <style lang="scss">
-  div {
+  .container {
     display: flex;
     flex-flow: column;
     background-color: rgb(48, 45, 45);
@@ -21,11 +63,96 @@
     flex: 1 1;
     border-radius: 5px;
     width: 170px;
+    position: relative;
     // aspect-ratio: 2/3;
+    transition: all 150ms ease-in;
 
-    span {
-      color: white;
-      padding: 5px 8px;
+    .inner {
+      position: absolute;
+      visibility: hidden;
+      display: flex;
+      flex-flow: column;
+      // gap: 10px;
+      top: 0;
+      height: 100%;
+      width: 100%;
+      padding: 10px;
+      background-color: transparent;
+      // -webkit-text-stroke: 0.2px black;
+
+      h2 {
+        font-family: unset;
+        font-size: 18px;
+      }
+
+      span {
+        color: white;
+        padding: 5px 0 5px 0;
+        font-size: 9px;
+        text-shadow: white 0px 0px 10px;
+      }
+
+      .rating {
+        display: flex;
+        flex-flow: row-reverse;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        -webkit-text-stroke: 1.5px white;
+        cursor: pointer;
+        overflow: hidden;
+        margin: 10px 0 10px 0;
+
+        button {
+          font-size: 35px;
+          font-family: "Rampart One";
+          letter-spacing: 10px;
+          line-height: 52px;
+          height: 38px;
+
+          &:hover,
+          &:hover ~ button,
+          &:global(.lit),
+          &:global(.lit ~ button) {
+            color: gold;
+            -webkit-text-stroke: 1.5px gold;
+          }
+        }
+      }
+
+      .btn-container {
+        display: flex;
+        flex-flow: row;
+        gap: 10px;
+        margin-top: auto;
+
+        button {
+          font-size: 10px;
+        }
+      }
+    }
+
+    &:hover {
+      transform: scale(1.3);
+    }
+
+    &:hover {
+      z-index: 99;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        filter: blur(4px) grayscale(80%);
+        // This makes the background very dark,
+        // but atleast the text is visible.. may want to change later.
+        mix-blend-mode: multiply;
+      }
+
+      .inner {
+        color: white;
+        visibility: visible;
+      }
     }
   }
 </style>

src/routes/+layout.svelte

@@ -75,6 +75,17 @@
     }
   }
 
+  :global(button.secondary) {
+    border: 2px solid transparent;
+
+    &:hover,
+    &:focus-visible {
+      background-color: white;
+      color: black;
+      border: 2px solid black;
+    }
+  }
+
   :global(button.plain) {
     background-color: transparent;
     color: black;
@@ -86,7 +97,6 @@
     align-items: center;
     justify-content: space-between;
     margin: 10px 20px 28px 20px;
-    // margin-bottom: 28px;
     position: relative;
 
     a {

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Poster from "@/lib/Poster.svelte";
   import PosterList from "@/lib/PosterList.svelte";
+  import WatchedModal from "@/lib/WatchedModal.svelte";
 
   export let data: import("./$types").PageData;
 </script>
@@ -11,6 +12,6 @@
 
 <PosterList>
   {#each data.watched as w}
-    <Poster poster={w.poster} />
+    <Poster poster={w.poster} title={w.title} desc={"ah"} />
   {/each}
 </PosterList>