Hey, I'm trying to implement a gradient on images in my project. Here's what I have so far:
import Image from 'next/image'
import Box from 'mui/material/Box'
import PlayIcon from './PlayIcon.tsx'
<Box
sx={{
display:'flex',
alignItems:'center',
justifyContent:'center',
position: 'relative',
width: '100%',
height: '100%',
backgroundImage: `linear-gradient(180deg, ${image?.data.gradient.colorOne}, ${image?.data.gradient.colorTwo})`,
}}
>
<Image
src={image.data.url}
width={imgWidth}
height={'80px'}
/>
{image?.data.playButton && <PlayIcon />} // NOTICE: HAVE A ABSOLUTE POSITION BECAUSE ICON SHOULD BE CENTERED ON IMAGE
</Box>
I've tried everything, but the gradient appears under the image. How can I fix this issue? Any help would be greatly appreciated.