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:
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…