.thumbnail_scale {
transform: scale(1); /* default */
-webkit-transform: scale(1); /* 크롬 */
-moz-transform: scale(1); /* FireFox */
-ms-transform: scale(1);
-o-transform: scale(1); /* Opera */
transition: all 0.3s ease-in-out; /* 부드러운 모션을 위해 추가*/
}
.thumbnail_scale:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
}
.thumbnail {width:325px; height:280px; overflow:hidden;
} /* 부모를 벗어나지 않고 내부 이미지만 확대 */
/* 프로필 이미지 원형 */
.profile_thumbnail { /* 원형 */
width: 150px;
height: 150px;
border-radius: 70%;
overflow: hidden;
}
.thumbnail_img {
width: 100%;
height: 100%;
object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="imghover.css">
</head>
<body>
<div class="thumbnail">
<div class="thumbnail_scale"><img src="img/%EC%9A%B0%EC%A3%BC1.jpg"></div>
</div>
<div class="thumbnail">
<div class="thumbnail_scale"><img src="img/%EC%9A%B0%EC%A3%BC2.jpg"></div>
</div>
<div class="profile_thumbnail" style="background: #BDBDBD;">
<img class="profile_img" src="img/%EC%9A%B0%EC%A3%BC1.jpg">
</div>
<div class="img ">
<div class="scale roundbox">
<img class="profile" src="img/%EC%9A%B0%EC%A3%BC2.jpg">
</div>
</div>
<style></style>
</body>
</html>