やりたかったこと
結論
通常はopacityを0にしておいて、hover時に1に変更する。
makeStylesを使った場合はちょっと特殊な書き方だったので、makeStylesを使いたい人は参考にしてください。
const useStyles = makeStyles({
...
image_item_bar: {
opacity: 0,
},
image_item: {
'&:hover': {
cursor: 'pointer',
"& $image_item_bar": {
opacity: 1.0,
}
}
},
});
export default function GridImageList() {
const classes = useStyles()
return (
<div className={classes.root}>
<ImageList variant="masonry" cols={3} gap={8}>
{itemData.map((item) => (
<ImageListItem key={item.img} className={classes.image_item} >
<img
srcSet={`${item.img}?w=161&fit=crop&auto=format 1x,
${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
alt={item.title}
className={classes.img}
/>
<ImageListItemBar
title={item.title}
actionIcon={
<IconButton
aria-label={`info about ${item.title}`}
className={classes.icon}
>
<DeleteIcon />
</IconButton>
}
className={classes.image_item_bar}
/>
</ImageListItem>
))}
</ImageList>
</div>
);
}