[styled-component] 마우스 hover effect

export const GameTitle = styled.span` // 게임 이름
  ${font.h3_medium};
  width: max-content; // 글자가 있는 만큼만 width를 갖게 된다. (!!!) 
  transition: all 0.8s;

  &::after { // 게임 이름에 밑줄, 원래는 투명한 상태
    display: block; 
    content: "";
    border-bottom: solid 1px white;
    opacity: 0;
  }
`;

export const GameVideo = styled.div` // 이미지랑 버튼 등 넣는 틀(?)
  position: relative;
  width: 285px;
  height: 180px;
  overflow: hidden;

  border-radius: 4px;
`;

export const GameImg = styled.img`
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.8s;
`;

export const PlayBtn = styled.div`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  flex-grow: 0;
  border-radius: 100%;
  padding: 14px;
  opacity: 0.6;
  background: ${root.black};

  svg {
    width: 44px;
    height: 44px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
`;

export const GameBox = styled.div` // 게임 하나를 감싸는 틀
  &:hover {
    cursor: pointer;

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

    ${GameTitle}::after {
      opacity: 1;
      transition: all 0.8s;
    }

    ${PlayBtn} {
      background: linear-gradient(135deg, #007ff4 0%, #6f00c6 100%);
    }
  }

  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.8s;
`;

 

원하는 것) GameBox라는 전체 틀의 어디에든 마우스를 올리면 게임 제목은 밑줄이 생기고, 게임 이미지는 확대되게 하기

 

 

밑줄은 hover시에 border-bottom으로 하면 나왔다 안 나왔다하면서 덜그럭 거린다.. 

이 분 블로그를 참고해서 opacity로 바꿔서 적용했다. 

https://kindkimyoung.tistory.com/28

[html&css] 메뉴 hover시 밑줄 트랜지션 a태그 display:block; after활용