Front-end/HTML, CSS

CSS / 마우스 오버 - 이미지 확대

조 수빈 2022. 9. 7. 13:36
  1. 마우스를 올렸을 때 => :hover
  2. 이미지 확대 => 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;
}