호버 시 자연스럽게 커지는 애니메이션

div나 텍스트, 버튼 등에 마우스를 hover 했을 때 자연스럽게 커지는 애니메이션을 넣으면 사용자가 '이 아이템을 클릭했을 때 어떤 이벤트가 있겠구나'라는 생각이 들어 사용자 경험을 증대시킬 수 있다.

 

필요한 CSS를 열심히 작성하고 아래와 같이 호버 이벤트를 추가한다.

cursor: pointer; /* 마우스 호버 시 커서를 클릭 커서로 바꿈 */

transition: transform 0.3s ease, box-shadow 0.3s ease; /* 호버 이벤트를 천천히 만듦 */

/* 마우스 호버 시 크게 카드를 천천히 키우고 그림자를 만듦 */
&:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);