问onmouseover显示添加购物车按钮和折扣图像

EN

.thumbnail .caption {
  display: none;
}
.thumbnail:hover .caption {
  display: block;
}

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">

<div class="row">
  <div class="col-xs-18 col-sm-6 col-md-3" style="text-align:center; min-height:380px;">
    <div class="thumbnail">
      <img src="//placehold.it/64X64" alt="products"  />
      <div class="caption">
        <p style="font-size:11px;">Name</p>
        <p style="font-size:17px;"><b><i class="fa fa-inr"></i> Price</b></p>                
      </div>
    </div><!--thumbnail end-->
  </div>
</div>

<script>
$(document).ready(function()
{
$("#mouseOverElement").mouseover(function()
{
$("#addToCartElement").fadeIn();
});
});
</script>

  .img-container {
        position: relative;
        overflow: hidden; 
/* this will hide the overflow that will be happening in translate(100%,100%)*/
      }

    .cart-btn {
        transition: all 1s ease-in-out;
        transform: translate(100%, 100%); 
/* this will put the cart-button away from the image */
    }

    .img-container:hover .cart-btn {
        transform: translate(0, 0); 
/* when hover, now the element is shown in their original position */ 
      }