[react] 이미지 hover시 이미지 짙어지며 텍스트 뜨게 만들기

각 컴포넌트 hover 시 짙어지며 원하는 텍스트가 나올 수 있도록 만들어보자.

전체 컴포넌트의 구조는 이렇다!

<ImgWrapper onClick={onClickToggleModal}>
        <p className="likes_on">
          <FavoriteIcon className="heartIcon" />
          {post.likes}
        </p>
        <div className="post_thumbnail">
          <PostImg src={post.thumbnail_url} alt="thumbnail" />
        </div>
</ImgWrapper>

이제 CSS를 작성해보자.

먼저 각각의 게시글 컴포넌트의 Position을 relative로 만들어주자.

그 다음, 컴포넌트에 꽉 차게 썸네일 이미지를 띄워주기 위해 이미지 컴포넌트의 width, height를 모두 100%로 설정해준다.

const ImgWrapper = styled.div`
  width: 130px;
  height: 130px;
  position: relative;

  .post_thumbnail {
    width: 100%;
    height: 100%;
  }
`;

그 다음 각 게시글의 썸네일 이미지 호버시 해당 글에 대한 '좋아요' 수를 표시하고 싶기 때문에 class를 하나 만들어준다.

썸네일 이미지가 호버 될 시에 'likes_on' class가 보이도록 할 것이기 때문에,

'likes_on' class의 기본 display 값을 none으로 하고, 게시글 컴포넌트 호버 시 이미지가 짙어지며 likes 수가 보일 수 있도록 display를 block으로 바꿔준다.

const ImgWrapper = styled.div`
  width: 130px;
  height: 130px;
  position: relative;

  .likes_on {
    position: absolute;
    top: 45%;
    left: 25%;
    z-index: 1;
    font-size: 15px;
    width: 60px;
    text-align: center;
    color: #ffffff;
    font-weight: 700;
    display: none;
    user-select: none;
  }

  &:hover .likes_on {
    display: block;
  }

  &:hover .post_thumbnail {
    filter: brightness(0.5);
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: middle;
  }

  .post_thumbnail {
    width: 100%;
    height: 100%;
  }

  .heartIcon {
    width: 16px;
    height: 12px;
  }
`;

 

마지막으로 게시글 컴포넌트 호버 시 해당 이미지가 짙어질 수 있도록 filter 프로퍼티의 값을 brightness(0.5)로 설정해주면 끝!