[CSS] 마우스 hover 시에 붕 뜨는 효과 넣기 (JS 사용X)

 

 

CSS에서 많이 사용되는 효과 중에 마우스 hover하면 붕 뜨는 효과를 어떻게 넣는지 알아보자!

 

 

---

 

 

1. 우선 붕 뜨게 할 아이콘을 만들어준다. 필자는 파란색 박스를 만들었다.

(CSS 탭을 누르면 CSS 코드를 확인할 수 있습니다.)

 

See the Pen Untitled by Git ini (@hwanghaein) on CodePen.

 

 

---

 

 

2. .box에  transition: transform 0.5s ease; 속성을 추가하고 
.box:hover에  transform: translateY(-20px); 속성을 추가한다. 

 

transition과 transform에 관련된 구체적인 설명은 아래의 mdn 문서를 참고하자!

https://developer.mozilla.org/ko/docs/Web/CSS/transition

https://developer.mozilla.org/ko/docs/Web/CSS/transform

 

See the Pen Untitled by Git ini (@hwanghaein) on CodePen.

 

마우스 hover하면 Y축으로 붕 뜨는 것을 확인할 수 있다.