마우스오버시 이미지가 조금 커지면서 돌아가는 효과

<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