css - 마우스 포인터 hover 구현

목차

• hover
• 코드

 

hover

 

특정 버튼 위에 마우스 포인터를 올리면 확대되는 이펙트를 본 적이 있을 겁니다. 이를 css로 구현 가능합니다.

 

 

코드

 

해당 요소에 대해 hover 되기 이전과 hover 된 상태의 css 스타일이 각각 한 개씩 필요합니다.

 

위 gif에서 화살표 버튼의 id는 'scroll-to-top'입니다.

 

그러므로 마우스가 요소 위로 올라왔을때올라왔을 때 요소 크기를 키우기 위해서는 ':hover' 가상 선택자를 붙여주고 transform: scale() 속성을 사용합니다. 아래와 같은 css를 적용하면 마우스가 요소 위로 올라왔을 때 요소 크기는 1.2배로 커집니다. 

 

#scroll-to-top:hover {
  transform: scale(1.2);
}

 

여기에 자연스러운 전환을 적용하고 싶으면 hover 되기 이전 스타일 규칙에 transition 속성을 적용합니다.

 

#scroll-to-top {
  // 다른 스타일들

  transition: 0.1s;
}

 

위와 같은 코드는 요소가 전환될때 총 0.1s 정도의 시간 동안 천천히 변환시킵니다.

 

 

결과