- 마우스를 올렸을 때 => :hover
- 이미지 확대 => transform 속성의 scale 함수
scale(x, y): 요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소
scaleX(n): 요소의 크기를 X축으로 x배 확대 또는 축소
scaleY(n): 요소의 크기를 Y축으로 y배 확대 또는 축소
ex) 마우스를 올렸을 때 1.5배 크기로 확대
a img {
...
}
a:hover img {
transform: scale(1.5);
}
추가로, transition 속성을 사용하면 위와 같은 속성 변화의 진행 속도를 정해줄 수 있음
transition: 'property' 'duration' 'timingfunction' 'delay';
(수정 예정)
transition-property:
transition-duration:
transition-timingfunction:
transition-delay:
ex) 모든 속성의 크기 변화를 0.3초 동안 일정하게(동일한 속도로)
a img {
transition: all 0.3s linear;
}