마우스를 올리면 이미지 확대되게 하기(CSS)

본문 이미지나 썸네일 이미지에 마우스를 올렸을 때 이미지가 확대되어 보이게 하는 효과를 간단한 CSS로 구현할 수 있다.

이미지에 생동감을 줄 수 있고 페이지 로딩 속도에 큰 영향도 주지 않아서 가볍게 쓸 수 있다.

HTML 코드

이미지에 클래스네임(thumb)을 주고, 이걸 img-wrap이라는 div와 box라는 div로 감싼 형태이다.

<div class="box">
  <div class="img-wrap">
    <img class="thumb" src="이미지주소" />
  </div>
</div>

CSS 코드

이미지를 가로 300px으로 출력하되

이미지에 마우스오버하면 가로세로 각각 1.2배 확대가 0.5초에 걸쳐 일어나고, 

마우스를 떼면 0.3초에 걸쳐 다시 원래 크기로 돌아가게 되도록 설정한 것이다.

<style>
  .box {width: 300px;}
  .box .img-wrap {overflow: hidden;}
  .thumb {width: 100%; height: auto;}
  .box img:hover {transform: scale(1.2, 1.2); transition-duration: 0.5s;}
  .box img {transition-duration: 0.3s;}
</style>

---

샘플 예제

코드 다운로드

마우스오버 시 이미지 확대.txt

0.00MB