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

 

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

 

1. html 구조

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

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

2. 효과 원리

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