Блог

Главная - Вопросы по программированию - Эффект наложения при наведении курсора мыши для Material UI CardMedia

Эффект наложения при наведении курсора мыши для Material UI CardMedia

#css #reactjs #material-ui

#css #reactjs #материал-пользовательский интерфейс

Вопрос:

Я хочу создать эффект наложения при наведении курсора мыши на компонент CardMedia в Material UI: это то, что у меня есть до сих пор:

 const useStyles = makeStyles((theme) => ({
  cardMedia: {
    height: 0,
    paddingTop: '100%',
    'amp;:hover': {
      cursor: 'pointer',
    },
  },
  card: {
    maxWidth: 345,
    borderRadius: 30,
  },
}));

const PhotoCard = ({ photo }) => {
  const classes = useStyles();
  return (
    <Card className={classes.card}>
      <CardMedia
        className={classes.cardMedia}
        image={photo.image}
        title="Paella dish"
      />
    </Card>
  );
};

Какое свойство я могу добавить в cardMedia, чтобы иметь эффект наложения при наведении?

Любая помощь будет принята с благодарностью!

Комментарии:

1. вы можете попробовать box-shadow

2. У вас есть пример того, чего вы хотите достичь?

3. Привет @DeanJames Я пытаюсь добиться чего-то вроде Pinterest, где при наведении курсора на карту появляется небольшое черное наложение.