[CSS/Animation] CSS로 구현한 GIF 애니메이션 효과 (zoom-in)
마우스 오버일때 커지고 작아지는(scale) 효과로 이미지가 움직이는 효과를 낼수 있습니다.
이미지가 약간 커지면서 조금 왼쪽으로 기울어짐
CSS
<style type='text/css'>
.block-image{float:left;width:247px;height:158px;margin-right:20px}
.block-image .thumb{width:100%;height:158px;position:relative;display:block;z-index:2;border-radius:2px;overflow:hidden}
.block-image a{width:100%;height:158px;display:block;transition:all .3s ease-out!important;-webkit-transition:all .3s ease-out!important;-moz-transition:all .3s ease-out!important;-o-transition:all .3s ease-out!important}
.block-image a:hover{-webkit-transform:scale(1.1) rotate(-1.5deg)!important;-moz-transform:scale(1.1) rotate(-1.5deg)!important;transform:scale(1.1) rotate(-1.5deg)!important;transition:all .3s ease-out!important;-webkit-transition:all .3s ease-out!important;-moz-transition:all .3s ease-out!important;-o-transition:all .3s ease-out!important}
</style>
<div class="block-image"><div class='thumb'>
</div></div>
DIV안에 이미지를 넣으시면 나타납니다.
<div class="block-image">
<a href="https://2.bp.blogspot.com/-fFAvM9GTJ9U/VnaO_ny5OhI/AAAAAAAAAOg/7X9_xua3Fz0/s1600/blogger_log.png" imageanchor="1"><img border="0" src="https://2.bp.blogspot.com/-fFAvM9GTJ9U/VnaO_ny5OhI/AAAAAAAAAOg/7X9_xua3Fz0/s1600/blogger_log.png" /></a>
</div>
아래는 적용된 효과입니다.
EmoticonEmoticon