이미지에 커서 올렸을 때 커지게 하기

 

이미지에 커서를 올렸을 때 이미지의 크기가 적당한 크기로 커졌으면 했다.

아주 쉬운 코드이지만 다음에 기억이 안 날 것 같아서 정리를 보았다.

 

transition을 사용해서 이미지가 변경되면 0.3초에 걸쳐서 서서히 변화하도록 하였다.

 

img:hover로 img에 마우스가 올라가면 

transform: scale(1.1); 기존 크기보다 1.1배 커지도록 하였다.

.img {
  transition: transform 0.3s ease;
}

.img:hover {
  transform: scale(1.1);
}

 

 

적용된 코드

이미지에 마우스를 올려보세요!