웹솔루션개발 25년 노하우! 해피CGI의 모든것

Icon Hover Effect 에서는 css를 이용한 9가지의 hover 효과를 확인할 수 있습니다. 해당 효과는 아이콘 이미지가 아닌 아이콘이 출력되는 폰트를 사용하여 색상을 쉽게 변경하고 스타일을 주고 있습니다. 효과를 주는 기본 소스는 아래와 같습니다. 홈페이지에서 소스를 다운 받아 사용해보시거나 데모사이트에서 구현된 아이콘 hover효과를 확인하시고 참고 하실 수 있습니다.

마우스 오버시 이미지가 수평으로 회전하면서 다른 이미지를 보여줍니다. 3d 효과로 회전을 하면서 자연스럽게 다른 이미지가 보여집니다. 텍스트를 입력할 수 있습니다. 해당 사이트에서 html,css 소스를 확인 및 다운로드 할 수 있습니다.

css3로 만든 다양한 호버효과 모음 hover.css는 css3로 만든 다양한 호버효과를 확인 하실 수 있습니다. github에서 다운받아서 개인용, 오픈소스용으로 사용하실수 있습니다.(상업용은 유료입니다.) 데모사이트에서 2d전환효과, 배경전환효과, 아이콘효과, 테두리효과, 그림자&글로우효과, 말풍선효과, 접힌 효과를 확인하실 수 있습니다. 사용방법은 github에서 다운받으신 후, hover.css에 사용하실 효과를 찾으셔서 css를 붙여넣으시면 됩니다. 그리고 사용할 요소에 class를 적용하시면 됩니다.

이미지에 아무스 오버했을때 사용할수 있는 css 만으로 디자인된 오버레이 효과 다양한 예제화 함께 사이트에서 효과를 바로 확인할수 있습니다. try it yourself 버튼을 클릭해서 해당 예제의 소스코드를 확인 할 수 있습니다.