I have successfully created a list of images using MaterialUI, but now I would like to enhance the user experience by adding a mouse hover effect to highlight the image under the cursor. Below is the code snippet for my image list. How can I accomplish this?
<Box
sx={{
height: 450,
marginLeft: "10em",
backgroundColor: "white",
display: "grid",
gridTemplateColumns: {
mobile: "repeat(1, 1fr)",
bigMobile: "repeat(2, 1fr)",
tablet: "repeat(3, 1fr)",
desktop: "repeat(4, 1fr)",
},
[`& .${imageListItemClasses.root}`]: {
display: "flex",
flexDirection: "column",
}
}}
>
<ImageList
variant="quilted"
sx={{ width: 2000, height: 1000, margin: "5em" }}
cols={3}
rowHeight={500}
>
{cardsList.map((item, index) => (
<div>
<ImageListItem key={index}>
<img
src={"data:image/jpeg;base64," + item.content}
alt={item.fileName}
/>
</ImageListItem>
</div>
))}
</ImageList>
</Box>