[emotion, styled-component] 이거에 마우스 올렸을 때 저거의 가상요소가 변했으면 좋겠어!

export const GameBox = styled.div`
  display: flex;
  flex-direction: column;
  transition: all 0.8s ease-in-out;
  &:hover {
    cursor: pointer;

    ${GameImg} {
      transform: scale(1.2);
    }

    ${GameTitle}::after {
      opacity: 1;
    }
    ${PlayBtn}::before {
      opacity: 0.6;
    }
    ${PlayBtn}::after {
      opacity: 0;
    }

    ${GameLike} {
      opacity: 1;
    }
  }
  margin-bottom: 64px;
`;

 

GameBox에 hover시 GameImg, GameTitle의 가상요소 after, PlayBtn의 가상요소 before, PlayBtn의 가상요소 after, GameLike 의 속성이 변한다.