예시
HTML
<div class="box">
<img src="https://t1.daumcdn.net/cfile/tistory/99FB9E335A0696E312">
</div>
CSS
.box{
height:200px;
width: 200px;
overflow: hidden;
}
.box img{
height:100%;
width: 100%;
object-fit:cover;
/* 마우스가 이미지를 벗어 났을 때도 자연스럽게 크기가 줄어들기 위함 */
transform:scale(1.0);
transition: transform .5s;
}
.box img:hover{ /* 마우스 호버시 */
transform:scale(1.5); /* 이미지 확대 */
transition: transform .5s; /* 시간 설정 */
}
/*
*/