# [jquery][animation] 簡易圖片動畫:使用transform
###### tags: `jquery`,`animation`

https://stackoverflow.com/questions/8049855/css-transitions-mixing-absolute-and-relative-positioning

jquery

$(document).ready(function(){
  $(".right_ad img").on("mouseover",function(){
    $(this).addClass("mb-5").addClass("shadow2").removeClass("shadow1");
  }).on("mouseleave",function(){
    $(this).removeClass("mb-5").removeClass("shadow2").addClass("shadow1");

  })
    
})

HTML

    <span class="right_ad">
      <a href="dome_link" target="_blank">
        <img class="shadow1" src="some_pic.jpg" width="190" border="0">
      </a>
    </span>

CSS

.right_ad img{
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* https://www.cssmatic.com/box-shadow */
  .mb-5{
    -webkit-transform: translate(0, -3px);
    -moz-transform: translate(0, -3px);
    transform: translate(0, -3px);
  }
  .shadow1{
-webkit-box-shadow: -9px 12px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -9px 12px 5px 0px rgba(0,0,0,0.75);
box-shadow: -9px 12px 5px 0px rgba(0,0,0,0.75);
  }
  .shadow2{
-webkit-box-shadow: -9px 19px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -9px 19px 5px 0px rgba(0,0,0,0.75);
box-shadow: -9px 19px 5px 0px rgba(0,0,0,0.75);
  }
  .right_ad {
	float: left;
	height: auto;
	width: 190px;
	margin-bottom: 10px;
}