How to bounce to top with button on image with CSS

Question

I want to make a hover effect to bounce an button to top. So i'm using CSS with hover and animating the margin-top. what happends that the image able to bounce to top but the button unable to bounce to top like images.

 img.hoverImages { margin: 0px; padding: 3px; outline: 2px solid #DDD; border: #a1a1a1; float: left; -webkit-transition: margin 0.2s ease-out; -moz-transition: margin 0.2s ease-out; -o-transition: margin 0.2s ease-out; } img.hoverImages:hover { cursor: pointer; margin-top: 5px; }

 <li> <div class="cont11"> <img class="hoverImages" src="../images/wvm.jpg"/ "> <!-- <em class="game_wvm "></em> --> <div class="game-name ">金刚狼</div> <div class="game-rollover clearfix "><a href="javascript:void(0); " class="real-play ">立刻开始</a> </div> <p class="game-progressive ">￥<span></span> </p> </div> </li>

IMAGES HAS BEEN BOUNCE UP AS BELOW but as circle that button not bounce up :

Answer 1

You are telling the image to transition not the div containing both the image and the circled area (the link). Add the transition (and hover) to the container instead, in this case that would be .cont11 then everything inside the container will move up.

Answer 2

change your style with this it should work

.cont11 {
  margin: 100px;
  padding: 3px;
  outline: 2px solid #DDD;
  border: #a1a1a1;
  float: left;
  -webkit-transition: margin 0.2s ease-out;
  -moz-transition: margin 0.2s ease-out;
  -o-transition: margin 0.2s ease-out;
}
.cont11:hover {
  cursor: pointer;
  margin-top: 5px;
}