Added zoom in effect to service images

src/lib/Header.svelte

@@ -15,6 +15,7 @@
         top: 0;
         backdrop-filter: blur(7px);
         padding: 0 0 1em 0;
+        z-index: 1;
     }
 
 

src/lib/Service.svelte

@@ -3,6 +3,7 @@ export let service = 'Lorem Ipsum';
 export let serviceImage = '/default_image.jpg';
 export let serviceImageAlt = 'Image';
 export let imageOnRight = false;
+import ZoomInImage from '$lib/ZoomInImage.svelte'
 </script>
 
 <style>
@@ -15,6 +16,7 @@ export let imageOnRight = false;
 
 .service-content{
     width: 100%;
+    height: 100%;
     display: flex;
     flex-direction: column-reverse;
     gap: 2em;
@@ -24,15 +26,6 @@ export let imageOnRight = false;
     flex-direction: column-reverse;
 }
 
-.image{
-    width: 100%;
-}
-
-.image>img{
-    width: 100%;
-    border-radius: 2em;
-}
-
 .service-text{
     width: 100%;
     font-size: 1.3em;
@@ -66,9 +59,9 @@ h2{
         </h2>
     </div>
     <div class="service-content" class:image-right={imageOnRight}>
-        <div class="image">
+        <ZoomInImage serviceImage={serviceImage} serviceImageAlt={serviceImageAlt}>
-            <img src={serviceImage} alt={serviceImageAlt}>
+
-        </div>
+        </ZoomInImage>
         <div class="service-text">
             <slot />
         </div>

src/lib/ZoomInImage.svelte

@@ -0,0 +1,38 @@
+<script>
+    export let serviceImage = '/default_image.jpg';
+    export let serviceImageAlt = 'Image';
+</script>
+
+<style>
+
+.image{
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 2em;
+    width: 100%;
+    height: 0;
+    padding-top: 35%;
+    overflow: hidden;
+    z-index: 0;
+}
+
+.image>img{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    object-fit: cover;
+    transition: 0.2s;
+}
+
+.image>img:hover{
+    transform: scale(1.1);
+}
+
+</style>
+
+<div class="image">
+    <img src={serviceImage} alt={serviceImageAlt}>
+</div>