이미지의 중앙영역이 분할되는 hover 효과 happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > 이미지관련 > 이미지의 중앙영역이 분할되는 hover 효과 상세정보

클라우드태그

Javascript

PHP

ASP

CSS

HTML

MYSQL

jquery

image

Mobile

API

slide

게시판

메뉴

현재접속자 명

이미지의 중앙영역이 분할되는 hover 효과

해피팀

네티즌

소스분류

이미지관련

다운로드 횟수

191 회

간단설명

이미지를 세로로 분할하여 이미지 컨텐츠의 제목이나 문장등을 표현할 수 있는 hover 소스로 마우스 오버시 이미지가 세로로 분할하게 합니다.

평가하기

CSS 코드로만 이루어진 hover 효과로 특정 이미지의 좌표값을 대입하여 아래와 같은 조건의 CSS 소스를 반영하시면 이미지 효과를 만들어 낼 수 있습니다.

Jquery 가 아닌 CSS 만으로 두개의 분리된 이미지를 표현하고
해당 영역내에 특정단어를 만들어내는 조합을 만들수 있습니다.

위 작업을 수핸하는 워크 flow 를 아래와 같이 하셔야 합니다.

높이 300px 에 비해 넓은 300px 의 이미지를 만듭니다.
오른쪽 중간에 걸쳐 이미지를 잘라 다른 레이어에 있는 두개의 반쪽을 배치합니다.
이동할 캔버스 (hover시) 크기를 300px 정도 증가시킵니다.
캔버스 상단에 있는 사잔의 하단을 놓습니다.

위와같은 효과로 대입할 경우 아래와 같은 효과를 가진 소스를 확인하실 수 있습니다.

네티즌 의견 이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)

내용

아이디

의견남기기

등록된 의견이 없습니다.