<style>
.post {
max-width: 320px;
}
.thumbnail {
width: 100%;
height: auto;
}
.post img:hover {
transform: scale(1.1, 1.1);
transition-duration: 1s;
}
.post img{
transition-duration: 1s;
}
.post .img-wrap {
overflow: hidden;
}
</style>
<body>
<div class="post">
<div>제목 : 이미지에 마우스 오버시 확대</div>
<div class="img-wrap">
<img class="thumbnail" src="./image/arichacircle.png" />
</div>
</div>
</body>
- transform: scale(1.1, 1.1)은 이미지에 마우스 커서를 올리면, 가로로 1.5배 그리고 세로로 1.5배 확대한다.
- transition-duration: 1s은 1초에 걸쳐서 확대한다. (.post img:hover)
- transition-duration: 1s은 마우스 커서가 떠나면, 1초에 걸쳐서 원래대로 되돌린다.(.post img)
- overflow: hidden은 정해진 영역 안에서 확대되도록 한다.