Kevin Powell - Community•3y ago

need help in styling the component

hey folks I want to have the same effect in my card component as the card at mee6 website shown in the picture now, let's say if this is the component

<Box sx={{display: 'flex',justifyContent: 'center',alignItems: 'center',height: '30vh',background: 'url(https://cdn.discordapp.com/icons/922883292926181487/a60795d325fda839139e964337ba7a4b.png) center center / cover no-repeat', backdropFilter: 'blur(1vw)', borderRadius: '8px'}}>
<img alt='guild-icon' src='https://cdn.discordapp.com/icons/922883292926181487/a60795d325fda839139e964337ba7a4b.png' style={{height: '80px', width: '80px', border: '2px solid transparent', borderRadius: '50%'}}/>
</Box>

<Box sx={{display: 'flex',justifyContent: 'center',alignItems: 'center',height: '30vh',background: 'url(https://cdn.discordapp.com/icons/922883292926181487/a60795d325fda839139e964337ba7a4b.png) center center / cover no-repeat', backdropFilter: 'blur(1vw)', borderRadius: '8px'}}>
<img alt='guild-icon' src='https://cdn.discordapp.com/icons/922883292926181487/a60795d325fda839139e964337ba7a4b.png' style={{height: '80px', width: '80px', border: '2px solid transparent', borderRadius: '50%'}}/>
</Box>

Now if add filter: blur(8px) then the whole component gets blurred which I don't want I'm using MUI

2 Replies

Aditya KiradOP•3y ago

here is the code sandbox link of the component https://codesandbox.io/s/jolly-framework-vybdo2?file=/src/App.js

AdityaKirad

CodeSandbox

jolly-framework-vybdo2 - CodeSandbox

jolly-framework-vybdo2 by AdityaKirad using @emotion/react, @emotion/styled, @mui/material, react, react-dom, react-scripts

Mannix•3y ago

you can't have image inside it so I would make a container/wrapper that wraps those two elements and used grid/position to stack them and then you can use blur on the div

Gaming

Programming

need help in styling the component