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

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




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

 

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