Vue Js Enlarge, Shrink Image on Hover

<!DOCTYPE html>
<html>

<body>

<div id="app">
		<div class="image-container">
			<h3>Vue Js Shrink Image on Hover </h3>
			<div class="image-inner-container">
				<img :src="url" v-bind:class="{ 'shrink': isShrunk }" v-on:mouseover="isShrunk = true"
					v-on:mouseout="isShrunk = false" />

</div>

</div>
	</div>
	<script type="module">
		const app = Vue.createApp({
			data() {
				return {
					isShrunk: false,
					url: 'https://www.sarkarinaukriexams.com/images/post/1670771584desola-lanre-ologun-IgUR1iX0mqM-unsplash_(1).jpg',

}
			},
		});
		app.mount('#app');
	</script>
	<style>
		.shrink {
			transform: scale(0.8);
			/* adjust scale as needed */
		}

.image-container {
			position: fixed;
			top: 0px;
			left: 0px;
			width: 100%;
			margin: 0 auto;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			border: 1px solid #999;
		}

.image-inner-container {
			width: 400px;
			height: auto;
			margin: 0 auto;

}

img {
			width: 100%;
			height: auto;
			cursor: pointer
		}
	</style>
</body>

</html>