만드는 방법: 마우스 오버할 때 확대
CSS를 사용하여 마우스 오버할 때 요소를 확대하는 방법을 배우세요.
마우스 오버할 때 확대
녹색 상자에 마우스를 올려놓으세요:
마우스 오버할 때 확대하는 방법
<style>
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s; /* 애니메이션 */
width: 200px;
height: 200px;
margin: 0 auto;
}
.zoom:hover {
transform: scale(1.5); /* (150% 확대 - 주의: 확대가 너무 크면 뷰포트 범위를 벗어날 수 있습니다） */
}
</style>
<div class="zoom"></div>
관련 페이지
강의:CSS 변환
