css - how to show image over blurred background

Question

I have the following code:

          const [hover, setHover] = useState(false);

          <Paper
            onMouseOver={() => setHover(true)}
            onMouseOut={() => setHover(false)}
            style={{
              width: '100%',
              height: 445,
              boxShadow: '0px 2px 5px ' + Colors.third + '66',
              backgroundRepeat: 'no-repeat',
              backgroundPosition: 'center center',
              backgroundImage: hover ? `url(${preview})` : ''
            }}
            className={hover ? 'image-paper' : ''}
          >
            some test text
          </Paper>

and the following css:

.image-paper {
  filter: blur(6px);
  -webkit-filter: blur(6px);
}

above is the result:

and above is the goal:

Answer 1

the unblured element element cannot be a child of the blured element, here a possible exemple of two stacked element with only one blured (those 2 img can be any other tag with content):

.Overlay {
  display: grid;
  justify-content: center;
}

img {
  grid-row: 1;
  grid-column: 1;
  object-fit: scale-down;
  filter: blur(0);
}

.blur {
  filter: blur(5px) hue-rotate(160deg);
}

<div class="Overlay">
  <img src="https://pngimg.com/uploads/mars_planet/mars_planet_PNG7.png" width="640" height="480" class="blur" />
  <img src="https://pngimg.com/uploads/avatar/avatar_PNG29.png" width="640 " height="480 " />
</div>