Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
413 views
in Technique[技术] by (71.8m points)

css - how to show image over blurred background

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: enter image description here

and above is the goal: enter image description here


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...