[css] CSS 애니메이션을 사용한 효과적인 마우스 호버 액션

26 Dec 2023

마우스 호버 액션은 사용자에게 웹 사이트의 상호작용성을 부각시키고 시각적 흥미를 더해 줍니다. CSS 애니메이션을 이용하여 마우스 호버 효과를 만들어 보겠습니다.

1. 기본 설정

먼저 HTML 구조를 설정하고 CSS 스타일링을 구현합니다.

<div class="hover-effect">
  Hover me
  <div class="overlay"></div>
</div>

.hover-effect {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #333;
  overflow: hidden;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

2. 애니메이션 추가

마우스 호버 시에 오버레이가 나타나도록 애니메이션을 추가합니다.

.overlay {
  /* 기존 CSS 내용 유지 */

  .hover-effect:hover .overlay {
    opacity: 1;
  }
}

위 코드를 삽입하여 마우스 호버 시에 효과적인 애니메이션이 나타나도록 하였습니다.

이제 귀하의 웹 페이지에 이것을 적용하여 마우스 호버 액션을 개선해 보세요!