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>