안녕하세요. 혀코입니다.
네이버 메인화면을 보면, 이미지에 마우스 오버하면 이미지가 확대되는 효과를 볼 수 있습니다.
그래서 이번 시간에는 마우스 오버하면 이미지를 확대하는 방법에 대해서 알아보겠습니다.
이미지를 확대하려면 CSS의 transition과 transform 속성을 사용해야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrapper {
width: 272px;
height: 153px;
overflow: hidden;
}
.thumb {
width: 100%;
transition: transform .2s;
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.thumb:hover {
transform: scale(1.05);
}
</style>
</head>
<body>
<div class="wrapper">
<img class="thumb" src="thumb.jpg" alt="마우스 오버하면 이미지 확대하는 방법" />
</div>
</body>
</html>
html 구조는 이미지 노드를 감싸는 wrapper 노드로 구성되어 있습니다.
wrapper 노드에는 가로값과 세로값을 지정해 주고 child 노드인 이미지가 wrapper의 사이즈 보다 커지는 부분은 안보이도록 overflow: hidden을 추가했습니다. 가로값과 세로값을 272px과 153px로 한 이유는 16:9 사이즈로 원본 이미지와 동일한 비율을 갖기 위해서 해당 값으로 지정했습니다.
child 노드에는 가로값을 100%로 지정해서 wrapper의 가로값에 맞게 이미지가 들어가도록 하고 애니메이션 효과를 주기 위해 transition: transform .2s 과 transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1)을 추가했습니다.
그리고 마우스 오버시 애니메이션이 작동하게 하기 위해서 .thumb:hover 에 transform: scale(1.05)를 추가해 줬습니다.
그래서 아래와 같이 이미지에 마우스 오버하면 이미지가 확대되는 효과를 적용할 수 있습니다.
이렇게 마우스 오버하면 이미지를 확대하는 방법에 대해서 알아봤습니다.
해당 정보가 유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다. :)
댓글