Vue Js Enlarge, Shrink Image on Hover

<!DOCTYPE html>
<html>
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
   <div id="app">
		<div class="image-container">
			<h3>Vue Js Enlarge Image on Hover </h3>
			<div class="image-inner-container">
				<img :src="url" v-bind:class="{ 'enlarged': isEnlarged }" v-on:mouseover="enlargeImage"
					v-on:mouseout="shrinkImage" />
           </div>
       </div>
   </div>
<script type="module">
		const app = Vue.createApp({
			data() {
				return {
					isEnlarged: false,
					url: 'https://www.sarkarinaukriexams.com/images/post/1670771584desola-lanre-ologun-IgUR1iX0mqM-unsplash_(1).jpg',

}
			},
			methods: {
				enlargeImage() {
					this.isEnlarged = true;
				},
				shrinkImage() {
					this.isEnlarged = false;
				}
			}

});
		app.mount('#app');
	</script>
	<style>
      .enlarged {
			transform: scale(1.2);
			z-index: 1;
		}
		.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>