Smooth zoom-out effect on image hover leave not working

[borsTiHD]

Hi everyone,

First of all, thank you for this fantastic project—it's amazing, and I already love it!

I have a use case where I want to create a smooth zoom-in effect on a preview image when the mouse hovers over it and then smoothly zoom out when the mouse leaves the image. The zoom-in effect works perfectly, but I'm struggling with implementing the zoom-out. Currently, the image "snaps" back to its original size immediately after the mouse leaves, without any transition.

I've experimented a bit by adding a flag to track the hover state, but even with that approach, I couldn't get the smooth zoom-out effect to work.

Could someone please help me figure this out?

Thank you in advance for your help

<template>
    <img
        :src="image.src"
        :alt="image.alt"
        loading="lazy"
        :class="{
            'motion-scale-out-[1.4] motion-duration-[10s]': hovered,
            // 'motion-scale-out-[1] motion-duration-[10s]': !hovered
        }"
        class="w-full h-full object-cover"
        @mouseenter="onEnter"
        @mouseleave="onLeave"
    >
</template>

<script setup lang="ts">
const hovered = ref(false)

const onEnter = () => {
    hovered.value = true
}

const onLeave = () => {
    hovered.value = false
}
</script>