[HTML/CSS]마우스 오버 효과(plus-ex사이트)

 

clip-path를 활용한 동적인 마우스 오버 효과

See the Pen [아카이브]마우스 오버 액션(플러스엑스) by TytanLee (@TytanLee) on CodePen.

 

1. html 구조

 - 이미지를 감싸는 영역은 총 두 개. 하나는 `:hover`를 주기 위한 영역, 하나는 `clip-path`를 설정할 영역

 - `clip-path`를 준 영역에 `:hover`를 넣으면 `clip-path` 영역이 줄어들거나 늘어날 때 마우스 위치에 따라 효과가 무한 반복. 때문에 `clip-path` 영역 위에 `:hover`를 넣기 위한 영역을 만들어줘야 한다.

2. 효과 원리

 - `.wrap`영역에 마우스를 올리면 이미지를 감싸고 있는 `div`의 `clip-path`를 줄이고, 그 안에 들어있는 `img`는 `scale`을 조절해 보여주는 원리