728x90
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 의 속성이 변한다.
728x90
'프론트엔드✏️ > 개인공부' 카테고리의 다른 글
[css] grid는 어려월... repeat(auto-fill, minmax(285px, 1fr)); (0) | 2022.10.24 |
---|---|
[react-slick] 페이지 번호, 커스텀 화살표 (0) | 2022.10.21 |
[react, query] 좋아요의 상태가 이상했던 이유 (0) | 2022.10.17 |
[css] 가상 요소, hover transition, 그라디언트 transition 주기 (0) | 2022.10.13 |
[styled-component] 마우스 hover effect (0) | 2022.10.12 |