Using image in overlay background image

[Astro-Otter-Space]

Hello,

I'm trying to use your component for a specific need : I want to display an image who is hover the same image in background. Here's the (static) exemple i want to do : https://coxpi.draftium.site/

I'm trying like this :

<template>
  <div class="header">
    <lazy-background
      :src="backgroundImage"
      :blur="30"
      position="center"
      size="cover"
    >
      <div slot="content" slot-scope="{ visible }">
        <img :src="coverImage" :style="imgCover">
        <!-- <lazy-img src="coverImage" /> -->
      </div>
    </lazy-background>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      visible: true,
      backgroundImage:
        "https://res.weblium.site/res/5c2df42d715e560022a8ae05/5c2df5722141000022dde670_optimized",
      coverImage: "https://www.wanimo.com/veterinaire/images/articles/chat/fibrosarcome-chat.jpg"
    };
  },
  computed: {
    imgCover() {
      return {
        'position': 'absolute',
        'height': 'auto'
      }
    } 
  }
};
</script>

<style>
.header {
  height: 300px;
}

.lazy-background-image {
  opacity: 0.5;
}
</style>

But that's not so good...Do you have an idea :) ? Here's my sandbox : https://codesandbox.io/s/wokqy5qwm8 Thank you for your return.

[subotkevic]

I'll check that and respond to you.