Adding a hover on card media does not work

user_19161329 0
Viewed 65
      const mediaStyle = {
    transition: "transform 1s",
    "&:hover": {
      transform: "scale(1.6)",
    },
  };

I have this card. Once I hover on a specific card, the card media or the picture on it will pop up. I tried the codes above, but it does not work

{data.map((i) => (
          <Grid
            item
            xs={12}
            sm={6}
            md={4}
            lg={3}
            key={listOfPrjects.indexOf(elem)}
          >
            <Card style={cardStyle}>
              <CardMedia  style={{ mediaStyle }}
              />
              <CardHeader title={i.title}/>
            </Card>
          </Grid>
        ))}
      </Grid>
material-ui reactjs css javascript
2 Answers
const mediaStyle = {
    transition: "transform 1s",
    "&:hover": {
      transform: "scale(1.6)",
    },
  };

I think this doesn't work with React.

edit
Sorry, didn't notice you are using material-ui. Anyway I leave here valid solutions for React plain.

You could use a css class

.scale{
  transition: "transform 1s",
}
.scale:hover{
  transform: "scale(1.6)"
}

or change style using state

edit
Fixed previous version

const [cardHovered, setCardHovered] = useState(null);

const mediaStyle = {
   transition: "transform 1s",
};

const hoverStyle = {
   transform: "scale(1.6)"
}

...

{data.map((i, elementIndex) => (
          <Grid>
            <Card>
              <CardMedia  
                 style={elementIndex == cardHovered ? { ...mediaStyle, ...hoverStyle} : mediaStyle}
                 onMouseEnter={()=>{setCardHovered(elementIndex)}}
                 onMouseLeave={()=>{setCardHovered(null)}}
              />
              <CardHeader title={i.title}/>
            </Card>
          </Grid>
        ))}

Here's an explanation: https://stackabuse.com/how-to-style-hover-in-react/

user_164882780

In your CardMedia inside the Card component you can add the styling for the hovering

return (
<>
  {data.map((i, elementIndex) => (
    <Card
      sx={{
        maxWidth: 345,
        "&:hover": {
          ".MuiCardMedia-root": {
            transform: "scale3d(1.6, 1.6, 1)"
          }
        }
      }}
    >
      <CardMedia
        component="img"
        height="140"
        image="https://mui.com/static/images/cards/contemplative-reptile.jpg"
        alt="green iguana"
        // Add this if you want the hover on the image only and remove the above hover
        // sx={{
        //   transition: "all 0.2s ease",
        //   "&:hover": {
        //     transform: "scale3d(1.6, 1.6, 1)"
        //   }
        // }}
      />
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          Lizard
        </Typography>
        <Typography variant="body2" color="text.secondary">
          Lizards are a widespread group of squamate reptiles, with over
          6,000 species, ranging across all continents except Antarctica
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small">Share</Button>
        <Button size="small">Learn More</Button>
      </CardActions>
    </Card>
  ))}
</>

);

Here is a working codesandbox

user_53764040
Related