How to bounce to top with button on image with CSS


Tags: javascript,jquery,css

Problem :

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 : enter image description here



Solution :

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.


    CSS Howto..

    How to align an element applying css margins that does not get modified according to browsers and screen resolutions?

    How can I make sure redundant

    tags do not break styling?

    How to change the input field's text color in MaterializeCSS?

    How to select css id's with numbers in them?

    How to Overcome Bootstrap's Default Styling? Element targeting issues?

    How to add css files to a custom module in Odoo 8?

    how can i get a css table-cell link not to stretch the clickable area

    Greasemonkey how to apply a CSS rule only for @media print?

    How to make this double line shape with css?

    how to display tabs in more than one row having the extra tabs coming one row up rather than one row below?

    How to stop the css attribute font-size to get override from external style sheet universal selector

    How To Place Buttons Around A Circle with HTML5 and CSS 3?

    How to vertical align icon inside label and button in the same way

    how to “replace” css Properties with jQuery

    how can i get these buttons side by side in the top right corner?

    Any ideas on how I could implement a grid-view in CSS? - CSS

    How to assign css for prettify(syntax highlighter)

    How do I do the CSS for this?

    Hovering over item in WordPress list of pages shows Featured Image

    How do i split user inputed text into individual characters?

    How to select list item by its contents?

    How to make search bar responsive using CSS

    how to center background image in window resize

    How do you prevent buttons from merging into each other with the .btn-group class in bootstrap?

    How do I remove the last border on my nav bar?

    How to have a sidebar on the right in a responsive page with maximum width?

    How does one know exact pixel size / relationships between CSS elements?

    How to make a background color stretch to left and right of viewport in Safari Browsers

    How to do “display = block” using jquery for particular element

    jQuery - How to revert css changes when using slideToggle()?