banner now zooms in on hover

src/lib/banner2.svelte

@@ -56,11 +56,13 @@
 
 <div class="container">
     {#if banner && banner !== ""}
+        <div class="banner-container">
             {#if pixelated}
                 <img class="banner pixelated-img" src="{banner}" alt="{bannerAlt}">
             {:else}
                 <img class="banner" src="{banner}" alt="{bannerAlt}">
             {/if}
+        </div>
     {/if}
     {@render titles({title, subtitle, date})}
     <hr>
@@ -71,10 +73,22 @@
         width: 100%;
     }
 
-	.banner {
+    .banner-container {
 		max-height: 300px;
+        height: 300px;
         width: 100%;
+        overflow: hidden;
+    }
+
+	.banner {
+        width: 100%;
+        height: 100%;
         object-fit: cover;
+        transition: scale var(--duration-animation) var(--anim-curve);
+	}
+
+    .banner-container:hover .banner {
+        scale: 1.04;
     }
 
     .title-container {
@@ -149,7 +163,7 @@
             line-height: 1.2rem;
         }
 
-        .banner {
+        .banner-container {
             height: 180px;
             max-height: 180px;
         }