CSS
마우스오버시 이미지가 조금 커지면서 돌아가는 효과
Dayis
2015. 8. 3. 05:33
마우스오버시 이미지가 조금 커지면서 돌아가는 효과
<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>