CSS fade in, fade out 효과 구현하기

1. 분석

fade in, fade out 효과를 구현할 때 CSS 속성인 `opacity`와 `transition`을 활용해서 쉽게 구현할 수 있다.

이번 포스팅에선 CSS만 활용해서 효과를 구현할 것이기 때문에 마우스를 오버했을 때 효과가 나타나는 것을 구현한다.

.fade-in {
    width: 100px;
    height: 100px;
    background-color: brown;
    opacity: 0;
    transition: 0.3s;
}
.tip1:hover + .fade-in {
    opacity: 1;
}
.fade-out {
    width: 100px;
    height: 100px;
    background-color: darkcyan;
    opacity: 1;
    transition: 0.3s;
}
.tip2:hover + .fade-out {
    opacity: 0;
}

위 코드에서 `.tip1:hover + .fade-in` 선택자에서 +의 의미는 인접한 형제(같은 계층의 바로 뒤 요소)를 선택한다는 뜻이다. 즉, `.tip1`요소에 마우스 오버된 상태인 경우 인접한 형제 `.fade-in` 요소를 선택해서 css속성값을 적용시킨다. 더 자세히 선택자에 대해서 알고 싶다면 CSS 선택자 포스팅을 참고하라.

fade in 효과를 적용하고 싶은 요소에는 opacity를 0에서 1로 변경하면 되고, fade out 효과를 적용하고 싶은 요소에는 opacity를 1에서 0으로 변경하면 된다.

2. 구현 결과 미리보기

opacity fade-in fade-out effect

글자에 마우스를 올리시면 박스가 나타납니다.(fade-in)

fade-in

글자에 마우스를 올리시면 박스가 사라집니다.(fade-out)

fade-out

3. 구현

3.1. HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>opacity fade-in fade-out effect</title>
    <style>
      .wrap {
        border: 1px solid black;
        padding: 10px;
      }
      .fade-in {
        width: 100px;
        height: 100px;
        background-color: brown;
        opacity: 0;
        transition: 0.3s;
      }
      .tip1:hover + .fade-in {
        opacity: 1;
      }
      .fade-out {
        width: 100px;
        height: 100px;
        background-color: darkcyan;
        opacity: 1;
        transition: 0.3s;
      }
      .tip2:hover + .fade-out {
        opacity: 0;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <span class="tip1"
        >글자에 마우스를 올리시면 박스가 나타납니다.(fade-in)</span
      >
      <div class="fade-in">fade-in</div>
      <span class="tip2"
        >글자에 마우스를 올리시면 박스가 사라집니다.(fade-out)</span
      >
      <div class="fade-out">fade-out</div>
    </div>
  </body>
</html>