Issue
I'm using the Avatar component from Material UI. I'am also using Tailwind
I can simply put the src
with the image url and it works
<Avatar alt="Cindy Baker" src="https://mui.com/static/images/avatar/3.jpg" />
But I have a situation where I need to put an overlay on the image (make it darker) and need to put a white text like +5
https://stackblitz.com/edit/react-ohycv7?file=Demo.tsx
Right now it looks like this
I need it to look something like
EDIT
with the help of gpt i came up with a close one
but the text is also darkened now
<Avatar
sx={{
position: 'relative',
filter: 'brightness(50%)',
'&::before': {
content: "'+2'",
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
color: 'white',
fontSize: '1.5rem', // Adjust the font size as needed
},
}}
alt="Cindy Baker"
src="https://mui.com/static/images/avatar/3.jpg"
/>
Solution
don't use filter, just make the background of the "pseudo element" a semi-transparent black
<Avatar
sx={{
position: 'relative',
// remove this
filter: 'brightness(50%)',
*/
'&::before': {
content: "'+2'",
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
color: 'white',
fontSize: '1.5rem', // Adjust the font size as needed
// add these 2 lines
padding:'100%', // add this
background: 'rgba(0,0,0,0.5)',
},
}}
alt="Cindy Baker"
src="https://mui.com/static/images/avatar/3.jpg"
/>
Answered By - Jaromanda X
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.