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

제품 소개, 메뉴 소개 등에 활용가능한 마우스오버 이벤트 슬라이등 패털 자바스크립트 html 소스 편집을 통해 좌우 개수 조절이 가능하며, 이벤트성 홈페이지, 제품 혹은 메뉴 소개를 위한 홈페이지에 사용하면 좋을것 같은 효과와 구성입니다. 해당 영역에 마우스 오버시, 해당 영역에 이미지 영역에 좌우로 커지고, 영역을 클릭시, 해당 영역의 설명 레이어가 전체 출력됩니다. 소스도 비교적 간단하여, 여러 부분에 활용이 가능하네요.

위 이미지와 같이 마우스오버를 했을때 서서히 글자색이 채워지는 효과를 낼 수 있는 css 입니다. 각도 및 모양 조절에 따라 다양한 효과를 낼 수 있습니다. ^^ 첨부된 index.html 파일을 통해서 소스를 자세히 확인하실 수 있습니다. ​ ​ ​

마우스의 이동방향에 따라 캡션이 열리는 방향이 달라집니다. 해당사이트에서 html, css, js 소스를 확인할 수있습니다.

카드형태의 정보출력시 반응형 마우스오버 효과입니다. 마우스 오버시 이펙트 css 만으로 작동 브라우저 크기에 따른 반응형 소스