How to enlarge Card size on hovering over it in Material UI?

Question

I am using Material UI and wish to enlarge a Card when you hover over it exactly as shown here

How should I achieve this? I have used the raised property but it is not what I want. I even saw someone using zDepth but it won't work too. My File goes like this :

import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import theme from '../theme';

const useStyles = makeStyles({
  root: {
    maxWidth: 310,
    margin: theme.spacing(5),
  },
});

export default function ImgMediaCard(props) {
  const classes = useStyles();
  const [state, setState] = useState({
    raised:false,
    shadow:1,
  })

  return (
    <Card className={classes.root} 
    onMouseOver={()=>setState({ raised: true, shadow:3})} 
    onMouseOut={()=>setState({ raised:false, shadow:1 })} 
    raised={state.raised} zDepth={state.shadow}>
      <CardActionArea>
        <CardMedia
          component="img"
          alt={props.alt}
          height="140"
          image={props.img}
          title={props.title}
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {props.caption}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            {props.description}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          Share
        </Button>
        <Button size="small" color="primary">
          Learn More
        </Button>
      </CardActions>
    </Card>
  );
}

Answer 1

Pug Less JSResult Skip Results Iframe EDIT ON .container //- Pen Info .info h1 React Card Demo span Made with by Deven

// Normal Demo .column .demo-title Normal

// Post
.post-module

  // Thumbnail
  .thumbnail
    .date
      .day 27
      .month Mar
    img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/photo-1429043794791-eb8f26f44081.jpeg')

  // Post Content
  .post-content
    .category Photos
    h1.title City Lights in New York
    h2.sub_title The city that never sleeps.
    p.description New York, the largest city in the U.S., is an architectural marvel with plenty of historic monuments, magnificent buildings and countless dazzling skyscrapers.
    .post-meta
      span.timestamp
        i.fa.fa-clock- o
        |  6 mins ago
      span.comments
        i.fa.fa-comments
        a(href='#')  39 comments

// Hover Demo .column .demo-title Frame On Hover

// Post
.post-module.hover

  // Thumbnail
  .thumbnail
    .date
      .day 27
      .month Mar
    img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/photo-1429043794791-eb8f26f44081.jpeg')

  // Post Content
  .post-content
    .category Photos
    h1.title City Lights in New York
    h2.sub_title The city that never sleeps.
    p.description New York, the largest city in the U.S., is an architectural marvel with plenty of historic monuments, magnificent buildings and countless dazzling skyscrapers.
    .post-meta
      span.timestamp
        i.fa.fa-clock-o
        |  6 mins ago
      span.comments
        i.fa.fa-comments
        a(href='#')  39 comments

View Compiled Resources

Answer 2

Following @Saud00 answer, this is MUI v5 approach:

const StyledCard = styled(Card)(({ theme }) => ({
  transition: "transform 0.15s ease-in-out",
  "&:hover": { transform: "scale3d(1.02, 1.02, 1)" },
}))

<StyledCard>
{/* Rest of card */}
</StyledCard>

Answer 3

It can easily be achieved by using "&" to defines styles for hover. Use "&:hover" in your root style of Card.

const useStyles = makeStyles({
  root: {
    maxWidth: 310,
    transition: "transform 0.15s ease-in-out",
    "&:hover": { transform: "scale3d(1.05, 1.05, 1)" },
  },
});

Answer 4

It looks like the implementation on that website on cards is using transform: scale3d on-hover, so you could just go and do the same since you are replicating the behaviour. I leveraged the raise state you already had instead of pseudo class :hover. See code below:

const useStyles = makeStyles({
  root: {
    maxWidth: 310,
    transition: "transform 0.15s ease-in-out"
  },
  cardHovered: {
    transform: "scale3d(1.05, 1.05, 1)"
  }
});

function ImgMediaCard(props) {
  const classes = useStyles();
  const [state, setState] = useState({
    raised:false,
    shadow:1,
  })

  return (
    <Card className={classes.root} 
    classes={{root: state.raised ? classes.cardHovered : ""}}
    onMouseOver={()=>setState({ raised: true, shadow:3})} 
    onMouseOut={()=>setState({ raised:false, shadow:1 })} 
    raised={state.raised} zdepth={state.shadow}>
      <CardActionArea>
        <CardMedia
          component="img"
          alt={props.alt}
          height="140"
          image={props.img}
          title={props.title}
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {props.caption}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            {props.description}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          Share
        </Button>
        <Button size="small" color="primary">
          Learn More
        </Button>
      </CardActions>
    </Card>
  );
}

 ReactDOM.render(
  <ImgMediaCard title="title" caption="caption" description="description" img="https://via.placeholder.com/310x140" />,
  document.getElementById("root")
);

<body>
  <div id="root"></div>

  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>

  <script type="text/babel">
  
    const { useState } = React;
  
    const { Card, CardActionArea, CardActions, CardContent, CardMedia, Button, Typography, makeStyles } = MaterialUI;
  </script>
</body>