NSFW is an abbreviation for not safe for work used on websites with 18+ content. Images are blurred at first and get sharp after the click on the image.

This is the image when the page is loaded:

After the click on the blurred image it gets sharpen with a smooth animation:

Here is the code of for displaying the image:

// Image.vue
<template>
  <div class="rounded-2xl overflow-clip bg-grayscale-w-5 relative">
    <Blur />
    <div
      :style="{ backgroundImage: `url('${image}')` }"
      class="min-h-[200px] bg-contain bg-no-repeat bg-center"
    />
  </div>
</template>

Note the Blur component:

// Blur.vue
<script lang="ts" setup>
  const blur = ref(true);
</script>

<template>
  <Transition>
    <div
      v-if="blur"
      @click="blur = false"
      class="absolute w-full h-full backdrop-blur-lg bg-white/30 cursor-pointer"
    />
  </Transition>
</template>

<style scoped>
  .v-enter-active,
  .v-leave-active {
    transition: opacity 0.5s ease;
  }

  .v-enter-from,
  .v-leave-to {
    opacity: 0;
  }
</style>

The trick is in the position relative on the outer div in the Image.vue component and the absolute positioning in the Blur.vue component. Plus the blur div has 100% width and height.
This covers the image with the blurred effect (backdrop-blur-lg and bg-white/30 classes) and when user clicks on the blurred div, it disappears with the nice transition thanks to v-if="blur".