CSS로 이미지 부드럽게 확대하기

이 글에서 사각형 및 이미지를 를 부드럽게 확대하고 확대하는 CSS에 대해 적으려고 한다.

 

확대하기 

이미지를 확대하는 CSS는 transform에서 scale이다. 가로와 세로 크기를 부드럽게 확대하는 것이다. 그리고 transform도 2D와 3D가 있다는 것을 알았다. 축에서 Z축을 더하면 3D가 된다. 3D 프로그램을 다루어 본 사람은 알 것이다. 예로 아래 초록색 사각형에 마우스 포인터를 가져가면 사각형이 확대된다. 이미지 대신 사각형을 사용했다.

 

 

 

 

아래가 소스의 일부인데 transform(1.5)로 원래보다 150% 확대하게 했다. 위 사각형을 zoom이라고 설정했다. 참고로 티스토리는 HTML을 지원하며 새에디터를 사용하면 아래와 같이 예쁘게 코드가 나타난다. 그런데 새에디터에서 코드를 삽입한 경우 기본모드에서 자꾸 사라진다. 그러니 HTML 모드에서 완성(발행) 버튼을 누렀으면 한다. 이러면 삽입한 HTML이 사라지지 않는다. 내가 이것 때문에 여러 번 개고생을 했다.

<style>
.zoom {
  padding: 50px;
  background-color: green;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.5); /* 150% 확대 */
}
</style>

예전에 새에디터의 코드블럭을 다룬 적 있으니 관심있으면 봤으면 한다.  티스토리에서 새에디터와 플러그인을 사용하면 위와 같은 코드블럭을 만들 수 있다.

새에디터에서 코드작성

부드럽게 확대

사각형이 확대가 되는데 부드럽지 못하다. 부드럽게 하기 위해서 transition 속성을 이용한다. 마우스 포인터를 사각형에 올렸을 때 확대되는 것을 부드럽게 하기 위해 zoom에 transition을 수치값을 더한다. 아래 사각형에 마우스 포인터를 올리면 부드럽게 확대된다. 위는 transition 값이 없었으니 급격하게 확대됐다. 즉 zoom(사격형)의 scale(확대)을 0.5초 동안 일어나게 한다. 하지만 transition은 정의하지 않았을 때는 즉시 행한다는 말이다.

 

 

 

 

위 효과에 대한 css 소스는 아래와 같고 아래 소스에서 transition: transform .5s 부분을 본다. .5는 0.5초를 말하고 만약 1초라면 1s라고 하면 된다.

<style>
.zoom {
  padding: 50px;
  background-color: green;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.5);
  transition: .5s; /* 부드럽게 */
}
</style>

 

이미지 확대 등

이것을 활용한 것이 아래 사진 및 이 블로그에서 카테고리 더보기 이미지, 메인에 이미지에 마우스 포인터를 올렸을 때 이미지가 확대 되는 것이다. 그리고 크기는 아니지만 색이 부드럽게 변하게 하기 위해 이 페이지에 나오는 카테고리 목록도 transition을 사용했다.

---

• [이지스퍼블리싱]Do it! HTML5+CSS3 웹 표준의 정석
• 생활코딩! HTML + CSS + 자바스크립트 : 처음 프로그래밍을 시작하는 입문자의 눈높이에 맞춘
• 모던 웹을 위한 HTML5+CSS3 바이블 : 웹 표준을 적용한 480개의 코드로 배우는 웹 페이지 제작의 모든 것