[해피CGI][cgimall] 이미지의 중앙영역이 분할되는 hover 효과

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

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




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

 

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

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