마우스오버시 이미지가 조금 커지면서 돌아가는 효과
<style>
.widget_thumbnail{
display: inline-block;
margin: 0px 15px 0px 0px;
overflow: hidden;
}
.widget_thumbnail img{
-webkit-transition:0.4s;
-moz-transition:0.4s;
-o-transition:0.4s;
transition:0.4s;
}
.widget_thumbnail img:hover{
-webkit-transform:scale(1.3) rotate(10deg);
-moz-transform:scale(1.3) rotate(10deg);
-o-transform:scale(1.3 rotate(10deg));
transform:scale(1.3) rotate(10deg);
}
</style>
적용방법 :
<span class="widget_thumbnail"><img src="이미지경로"></span>
'CSS' 카테고리의 다른 글
div 태그 내 말줄임표 적용 (0) | 2015.08.03 |
---|---|
모바일에 적용되는 미디어쿼리 (0) | 2015.07.19 |
이미지 없이 div 라운드 처리 (0) | 2012.06.01 |