Fade in loaded images with blurhash background [Sveltekit]

[maumercado]

Hi,

First of all I love the work done with this library, easy to use, fast and helps a lot with proper image fetching.

Right now I just have one question, how can I add a fade in transition from blur background image to showing the complete image using Image and blurhash.

This is what my component looks like right now:

<script lang="ts">
	import { blurhashToCssGradientString } from '@unpic/placeholder';
	import { Image } from '@unpic/svelte';
	import { type Post } from '$lib/types';
	import Prism from 'prismjs';
	import { onMount } from 'svelte';
	export let data: Post;

	$: ({ title, photo_metadata, content } = data);

	const placeholder = blurhashToCssGradientString(data.photo_metadata.blur_hash);

	const postImageCss = `border-radius: var(--theme-border-radius-default);
		box-shadow: 6px 6px 8px 3px rgba(0, 0, 0, 0.3);
		object-fit: cover;`;

	onMount(() => {
		Prism.highlightAll();
	});

</script>

<article class="post-wrapper">
	<h1 class="post-title">{title}</h1>
	<Image
		layout="fullWidth"
		class="post-image" // I know the class here doesn't do anything
		src={photo_metadata.urls.full}
		alt={photo_metadata.alt_description}
		background={placeholder}
		loading="lazy"
		height={450}
		style={postImageCss} // which is why I have this
	/>
	{@html content}
</article>

<style>
	:global(code[class*='language-'], pre[class*='language-']) {
		font-size: 1.4rem;
	}

	.post-wrapper {
		margin: 0 auto;
		width: 85%;
		display: flex;
		flex-direction: column;
		gap: 3.6rem;
		padding: 2.4rem;
	}

	.post-title {
		align-self: center;
	}

</style>

Any suggestions are greatly appreciated, and of course if you have any code improvements to be made unrelated to my question those are welcome as well.

[maumercado]

Feel free to close this, I found my answer here #211

What I ended up doing was wrapping the Image on a div, added the blurred bacgkround to that's div style prop like so:

<script>

	const onLoadImage = (() => {
		document.querySelector('.post-image')?.classList.add('fade-in-image');
	});
</script>

	<article class="post-wrapper">
	<h1 class="post-title">{title}</h1>
	<div class="background-blur" style={`background-image: ${placeholder}` }>
	<Image
		class="post_image"
		layout="fullWidth"
		src={photo_metadata.urls.full}
		alt={photo_metadata.alt_description}
		loading="lazy"
		height={450}
		on:load={onLoadImage}
	/>
	</div>
	{@html content}
</article>

And last the post-image and fade-in-image css styles live in static/css which means that the classes are there on compile rather than in the scoped style, and it works, I assume its like so because of sveltes compiling the css and being available vs dynamically creating and scoping it and then being available. Not sure.. some clarification would be great here so I'll google more.