How To - 호버로 확대/축소하기

w3.css

호버로 확대/축소하기

CSS를 사용하여 호버 시 요소를 확대/축소하는 방법을 알아보자.

호버로 확대하는 방법

이 toFixed() 방법을 사용하면 소수점 두 자리만 표시하도록 숫자를 포맷할 수 있다. 결과는 반올림된다(5.56 대신 5.57 표시).

1단계) HTML 추가

<style>
.zoom {
  padding: 50px;
  background-color: green;
  transition: transform .2s; /* Animation */
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
</style>

<div class="zoom"></div>

기본 예시

예제 보기