안녕하세요.
요즘 이미지는 그냥 보여주지는 않고 이미지 오버시 확대나 이벤트를 발생시켜서 생동감있는 페이지를 연출하는데요.
제일 간단하게 이미지 마우스 오버시 확대되고 마우스가 벗어나면 다시 되돌아오는 효과를 알려드리려고 합니다.
일단 정말 간단합니다.
1. html
<html>
<body>
<h1>이미지 확대 테스트 </h1>
<img class="scale" src="이미지 경로"/>
</body>
</html>
2. css
.scale {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transition: all 0.5s ease-in-out; /* 서서히 확대 */
}
.scale:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
}
1번의 html에 이미지에 class를 추가 해주면 간단하게 서서히 확대 되었다가 축소되는 효과를 볼 수 있습니다.
감사합니다^^
'html' 카테고리의 다른 글
| HTML 한글 깨짐 관련. (0) | 2017.07.05 |
|---|