마우스 오버 시, 이미지 변환되는 원리가 궁금하여 찾아본 바...
Over 전, 후 이미지를 하나의 이미지로 그려놓고, CSS에서 간단한 조작으로
이미지를 변환하는 것이었다!
[원리]
1. 먼저 보여줄 이미지 크기를 지정
.sample {
background-image:url('m2_4.gif');
width:153px;
height:153px;
}
2.Mouse over 시, 보여줄 이미지 위치를 지정
.sample: hover {
background-position: 0px 153px;
}
sample에서 상속받은 위치 153px~153px에서 +0px~153px 크기만큼을 보여준다
