Background image opacity affects icon on top of it - css

Question

I am using Card component from Material UI. It looks like this:
You can see both: Star and Plus icon have inherited opacity from the background image.
I want the Plus icon to have opacity 1. Is this possible? Here is code:
<Card
style={{
position: "relative",
}}
>
<IconButton
color="primary"
className={classes.star}
style={{
pointerEvents: itemEnabled ? "auto" : "none"
}}
>
{item.favorite ? <Star /> : <StarBorder />}
</IconButton>
<IconButton
color="primary"
className={classes.permission}
onClick={e => {
e.preventDefault();
e.stopPropagation();
console.log("test")
}}
>
<Add />
</IconButton>
<CardActionArea style={{
width: "100%",
pointerEvents: itemEnabled ? "auto" : "none"
}}>
<CardMedia
className={classes.media}
image={requiredImage}
style={{
opacity: itemEnabled ? 1 : 0.4,
}}
title={item.favorite ? item.link.name : item.name}
/>
</CardActionArea>
</Card>
here are some styles used in className if interested:
const styles = theme => ({
media: {
height: 140,
width: "100%"
},
star: {
position: "absolute",
right: 0,
color: "white",
zIndex: 555
},
permission: {
position: "absolute",
right: 0,
top: 30,
color: "white",
zIndex: 555
},
linksTitle: {
padding: 20
}
});