CSS transform and box-shadow on hover

Question

I have card component using material UI. The card is transforming on hover and there should appear shadow on the card too. But when i put the box-shadow shadow appears on the box before transforming, and there is white space between the transformed card and the shadow. How can i fix this?

const CardStyle = styled(Card)`
  background: red;
  transition: transform 50ms;
  &:hover {
    transform: scale(1.02) perspective(0px);
    box-shadow: ${({ theme }) => theme.shadows[4]};
  }
`;

The same output in other way:

:hover {
  transform: scale(1.02) perspective(0px);
  box-shadow: 4px 4px 4px rgba(60, 60, 93, 0.33)
}

What is `theme.shadows[4]`? Is there some x, y offset? – samuellawrentz Apr 19 '21 at 14:48 — samuellawrentz, Apr 19 '21 at 14:48
yes, that is offset for shadows dimension. – Kate Apr 19 '21 at 14:53 — Kate, Apr 19 '21 at 14:53

score 5 · Accepted Answer · answered Apr 19 '21 at 15:20

Include a transition for your box-shadow if I'm understanding your intent right.

div {
  height: 5rem;
  width: 5rem;
  margin: 3rem auto;
  border: green 5px dashed;
  background: red;
  transition: transform .5s, box-shadow 1s;
}

div:hover {
  transform: scale(1.02) perspective(0px);
  box-shadow: 0 10px 10px rgba(255,0,0,.7);
}

<div></div>

CSS transform and box-shadow on hover

1 Answers1