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

css만으로 간단하게 마우스 오버시 밑줄 효과를 낼 수 있습니다. 위 이미지와 같이 마우스오버를 했을때 서서히 글씨 색깔이 변하고 밑줄이 그어지는 효과를 낼 수 있는 css 입니다. 첨부된 index.html 파일을 통해 자세하게 해당 효과를 낼 수 있는 소스를 확인하실 수 있습니다. ^^

* Motion Hover Effects 이미지 왜곡으로 흥미로운 호버 효과나타내는 jquery 플러그인. 주요 기능은 `이미지 왜곡 효과`, `이미지 스트레치 효과` 가 되겠습니다 * License 웹 사이트, 웹 앱 및 판매용 웹 템플릿과 같은 개인 또는 상업용 프로젝트에 통합되거나 구축 된 경우 자유롭게 사용할 수 있습니다. "있는 그대로"리소스를 가져 와서 판매, 재배포, 재 게시 또는 "플러그인"버전의 리소스를 판매 할 수 없습니다. 이 리소스를 사용하여 빌드 된 무료 플러그인에는 눈에 띄는 언급이 있어야하며 원본 저작물에 연결되어야합니다. * 사용방법 첨부된 압축파일을 해제하여 원하는 웹루트 디렉터리에 업로드 합니다 적용할 html 문서에 아래와 같은 구조형태로 코드를 삽입해야 합니다 제공된 ..

css 만으로 제작된 소스입니다. 해당 사이트에서 소스확인 및 작동 인터페이스를 확인 가능합니다.

css 에니메이션을 이용한 네이게이션에 마우스 오버효과 소스입니다. 마우스 오버시 언더라인 에니메이션 마우스 오버시 언더라인 부터 위쪽으로 채워지는 스타일 마우스 오버시 원형으로 채워지는 스타일 마우스 오버시 중앙부터 수직 상하 방향으로 채워지는 스타일 해당사이트에서 데모 확인 및 소스를 바로 확인할 수 있습니다

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

사이트에서 데모사이를 확인할 수 있고 소스를 다운로드 하실수 있습니다. 익스플로어 11 이상, 크롬에서 작동합니다. 데모페이지에서 다양한 효과의 마우스 오버 에니메이션을 확인하실 수 있습니다.

css3을 이용하여 이미지에 호버이펙트를 다양하게 사용할 수 있습니다. 마우스올렸을때 제각각 다른 효과를 미리보기로 확인할 수 있습니다. 기본구조 Nice Lily Lily likes to play with crayons and pencils View more 사용 css3 figure.effect-sadie figcaption::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%); content: ''; opacity: 0; transform: translate3d(0,50%,..