css 마우스 오버 효과 - 카드 뒤집기

 

마우스 오버 효과 - 카드 뒤집기

 

마우스를 hover 했을때 플립이펙트라고 하는 카드 뒤집어 지는 효과를 주기위해서 아래 사이트를 참고 했습니다.

 

http://gudh.github.io/ihover/dist/index.html

http://gudh.github.io/ihover/dist/index.html

 

링크 타고 들어가면 다양한 효과를 볼 수 있는데요

 

 

 

다양한 효과들 중에서 Hover effect11번을 참고해서 만들어 보겠습니다.

 

제일 마지막 메뉴의 How to use is?을 클릭하면 사용방법이 나옵니다.

 

HTML 마크업을 하고 ihover.css만 추가 하면 된다고 하네요

먼저 위에 나와있는 경로에 따라 css를 다운 받습니다.

https://gudh.github.io/ihover/src/ihover.css

 

다운 받은 css link를 추가하고

 

Circle의 11번효과를 사용하기 위해서 그 아래 마크업을 복사해서 내용을 변경 해주면

 

 

마우스 오버 했을때 뒤집어지는 효과를 줄 수 있습니다.

See the Pen flip by kim oya (@ttuttu) on CodePen.

 

 

위에 코드를 참고해서 만든 네모 모양 카드 플립효과

See the Pen flip2 by kim oya (@ttuttu) on CodePen.