Как добавить анимацию появления фото?

Question

[pshevnin]

Всем привет, я новичок во фронтенде и у меня такая проблема: у меня есть проект написанный на Sveltekit, в этом проекте есть страница с галереей, то есть это просто grid с фотографиями выведенными через цикл. Мне нужно сделать так, чтобы при нажатии на фото, оно открывалось в центре экрана крупно (это сделано) Но также мне нужно добавить анимацию плавного открытия этого фото, чтобы оно как-бы выходило из фотографии на которую кликнул пользователь, увеличивалось и перемещалось в центр и всё это анимацией.

<script lang="ts">
	import ResponsiveImage from '$lib/ResponsiveImage.svelte';
	import photos from '$lib/photos.json';

	interface GalleryImage {
		highResSource: string;
		alt: string;
	}

	let images: GalleryImage[] = [];

	images = photos.map((photo) => ({
		highResSource: photo.urlHeight,
		alt: photo.id
	}));

	function convertToThumbnailFileName(fullFileName: string, thumbnailSuffix: string): string {
		const [name, extension] = fullFileName.split('.');

		const thumbnailFileName = `${name}_${thumbnailSuffix}.${extension}`;

		return thumbnailFileName;
	}

	let selectedImage: GalleryImage | null = null;

	function openImage(index: number) {
		selectedImage = images[index];
	}

	function closeImage() {
		selectedImage = null;
	}
</script>

<div class="container">
	{#each images as image, index}
		<div class="gallery-image" on:click={() => openImage(index)}>
			<ResponsiveImage
				source={convertToThumbnailFileName(image.highResSource, '300')}
				alt={image.alt}
				useAvif={true}
				width={300}
				height={250}
				isLazy={true}
			/>
		</div>
	{/each}
</div>

{#if selectedImage}
    <div class="modal-overlay active" on:click={closeImage}>
        <div class="modal active">
            <img src={selectedImage.highResSource} alt={selectedImage.alt} class="modal-image" />
        </div>
    </div>
{/if}

<style lang="scss">
	.container {
		justify-content: space-evenly;
		align-items: center;
		grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
		grid-gap: $standardSpacingMd;
	}

	.modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.5s linear;
        z-index: 999;
    }

    .modal-overlay.active {
        opacity: 1;
    }

	.modal {
		background-color: white;
		padding: 10px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	.modal-image {
		max-width: 90%;
		max-height: 70vh;
		margin: auto;
	}
</style>

Я написал такой код, анимация не работает, пробовал разные вариации, но анимация то совсем отсутствует, то центральное фото и его фон остаются прозрачными и невидимыми. Я не совсем понимаю, как мне реализовать то, что я хочу, возможно я выбрал неправильный подход по добавлению анимации