Hover effect on blog image update (#19)

* Changed zoom style
* Underline post title

Author: prokawsar

src/lib/components/blogs/BlogItem.svelte

@@ -15,10 +15,14 @@
 		class="flex flex-col gap-3 rounded-xl bg-arkGray5 p-5 hover:bg-arkOrangeLight"
 	>
 		<div class="flex flex-col gap-2">
-			<Image
-				src="{base}{post.image ?? 'https://placehold.co/100x100/EEA050/white/?text=' + post.title}"
-				class="max-h-48 w-full rounded-md object-cover xl:max-h-52 {hover && 'scale-105'}"
-			/>
+			<div class="overflow-hidden rounded-md">
+				<Image
+					src="{base}{post.image ??
+						'https://placehold.co/100x100/EEA050/white/?text=' + post.title}"
+					class="max-h-48 w-full rounded-md object-cover xl:max-h-52 {hover && 'scale-105'}"
+				/>
+			</div>
+
 			<div class="flex h-52 flex-col gap-1">
 				<time dateTime={post.date ?? post.date} class="text-arkGray4">
 					{new Date(post.date).toLocaleDateString(config.locale, {
@@ -27,7 +31,7 @@
 						day: 'numeric',
 					})}
 				</time>
-				<p class="text-2xl font-extrabold">
+				<p class="text-2xl font-extrabold {hover && 'underline'}">
 					{post.title}
 				</p>
 				<div class="">

src/lib/components/elements/Image.svelte

@@ -23,12 +23,7 @@
 </script>
 
 {#if loaded}
-	<img
-		{src}
-		alt="app screenshot"
-		class="max-h-[500px] transition-all duration-300 ease-in-out xl:max-h-[600px]"
-		{...$$restProps}
-	/>
+	<img {src} alt="app screenshot" class="max-h-[500px] xl:max-h-[600px]" {...$$restProps} />
 {:else if loading}
 	<div class="flex h-full max-h-[500px] w-[150px] flex-col items-center xl:max-h-[600px]">
 		<Icon icon="ei:spinner-3" class="animate-spin" width="50px" />

src/lib/components/sections/OurApps.svelte

@@ -34,7 +34,7 @@
 		memo6: MemoImage6,
 		retouch1: RetouchImage1,
 		retouch2: RetouchImage2,
-		retouch3: RetouchImage3
+		retouch3: RetouchImage3,
 	}
 
 	// const getImagesWithName = (name: string) =>
@@ -94,7 +94,7 @@
 					<div class="flex-flow flex max-w-full gap-3 overflow-x-auto">
 						{#each activeAppImages as image, i}
 							{#key image}
-								<Image src={image} />
+								<Image src={image} class="min-w-[300px]" />
 							{/key}
 						{/each}
 					</div>