banner now zooms in on hover

src/lib/banner2.svelte

@@ -24,7 +24,7 @@
 </script>
 
 {#snippet titles({title, subtitle, date}: {title: string, subtitle: string, date: string})}
-        <h1 class="title">{title}</h1>
+    <h1 class="title">{title}</h1>
 	<div class="title-container">
         <div class="title-text-container">
             {#if subtitle}
@@ -56,11 +56,13 @@
 
 <div class="container">
     {#if banner && banner !== ""}
-        {#if pixelated}
-            <img class="banner pixelated-img" src="{banner}" alt="{bannerAlt}">
-        {:else}
-            <img class="banner" src="{banner}" alt="{bannerAlt}">
-        {/if}
+        <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,12 +73,24 @@
         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 {
         display: flex;
         flex-direction: row;
@@ -149,7 +163,7 @@
             line-height: 1.2rem;
         }
 
-        .banner {
+        .banner-container {
             height: 180px;
             max-height: 180px;
         }