From 6efb9effde646dc9658c887e5848b33482bcab90 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Mon, 27 May 2024 05:41:37 -0700
Subject: feat(hololive): parallax image for thumbnails

---
 src/lib/Hololive/Stream.svelte | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

(limited to 'src/lib')

diff --git a/src/lib/Hololive/Stream.svelte b/src/lib/Hololive/Stream.svelte
index e9057352..1f0a5b62 100644
--- a/src/lib/Hololive/Stream.svelte
+++ b/src/lib/Hololive/Stream.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import ParallaxImage from '$lib/Image/ParallaxImage.svelte';
 	import root from '$lib/Utility/root';
 	import identity from '$stores/identity';
 	import locale from '$stores/locale';
@@ -55,7 +56,14 @@
 	</p>
 
 	<a href={live.link} class="preview" target="_blank">
-		<img src={live.livePreviewImage} alt="Stream Thumbnail" />
+		<span class="preview-image">
+			<ParallaxImage
+				source={live.livePreviewImage}
+				alternativeText="Stream Thumbnail"
+				limit={12.5}
+				duration={2750}
+			/>
+		</span>
 	</a>
 </div>
 
@@ -65,19 +73,22 @@
 	.preview {
 		// margin: 0.15rem;
 
-		img {
+		:global(img) {
 			border-radius: 8px;
 			height: 20vh;
 			object-fit: cover;
+		}
+
+		.preview-image {
 			transition: $transition;
 		}
 
 		&:hover {
-			img {
+			.preview-image {
 				position: relative;
 				z-index: 2;
 				transition: $transition;
-				transform: scale(1.05);
+				transform: scale(1.025) !important;
 			}
 		}
 
-- 
cgit v1.2.3