鼠标悬停在图像上的效果

Question

最初图像仅可见，按钮隐藏在图像后面。在图像鼠标悬停在图像顶部小，按钮将出现在图像底部。 但是如何将按钮隐藏在图像中？

在鼠标悬停之前，图像仅在鼠标悬停在图像混乱和可见按钮后可见。我试过这样但没有得到，这里 sn-p 供参考（http://www.olleep.com/）我正在尝试做同样的事情

$(document).ready(function() {
    $('#textbox').mouseenter(function() {
        $('#textbox').animate({
        'marginTop' : "-=30px" //moves up
        });
    });
    $('#textbox').mouseleave(function() {
        $('#textbox').animate({
        'marginTop' : "+=30px" //moves up
        });
    });
});

.container{

       margin:50px;
        }
    #textbox{
        position:relative;
            width:300px;
           
    }
    #text{
      position:relative;
        overflow:hidden;
         z-index:1;
        background-color:#282727;
        text-align:center;
        padding:10px 10px 10px 10px;
    }

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div id="textbox">
<img src="http://i.imgur.com/9hr2mlL.png" width="300px">
<div id="text">
<button class="btn btn-danger btn-md">MORE INFO</button>
<button class="btn btn-danger btn-md">BOOK NOW</button></div>
</div>
</div>

Answer 1

您可以单独使用 CSS 完成此操作，仍然添加悬停效果，然后使用 transform:translateY 在屏幕上切换这些效果：

div {
  display: inline-block;
}
.wrapper {
  overflow: hidden;
  position:relative;
}
.buttons{
  position:absolute;
  bottom:0;
  width:100%;background:dimgray;
  font-size:0;height:40px;
    transition:all 0.4s;
    transform:translateY(100%);
  }
.buttons button{
  width:40%;margin:5%;font-size:15px;

  }
.wrapper img{  transition:all 0.4s;}

.wrapper:hover .buttons{
  transform:translateY(0);
  }
.wrapper:hover img{
    transform:translateY(-35px);
  }

<div class="wrapper">
  <img src="http://i.imgur.com/9hr2mlL.png" />
  <div class="buttons">
    <button>Button 1</button>
    <button>Button 2</button>
  </div>
</div>

Answer 2

你可以用简单的.hide()和.show()来做到这一点

检查这个 http://codepen.io/vigneshvdm/pen/PNLJKL

Answer 3

添加$('#text').show();和$('#text').hide();

$(document).ready(function() {
    $('#textbox').mouseenter(function() {
        $('#text').show();
        $('#textbox').animate({
        'marginTop' : "-=30px" //moves up
        });
    });
    $('#textbox').mouseleave(function() {
        $('#text').hide();
        $('#textbox').animate({
        'marginTop' : "+=30px" //moves up
        });
    });
});

.container{

       margin:50px;
        }
    #textbox{
        position:relative;
            width:300px;
           
    }
    #text{
      position:relative;
        overflow:hidden;
         z-index:1;
        background-color:#282727;
        text-align:center;
        padding:10px 10px 10px 10px;
    }

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div id="textbox">
<img src="http://i.imgur.com/9hr2mlL.png" width="300px">
<div id="text">
<button class="btn btn-danger btn-md">MORE INFO</button>
<button class="btn btn-danger btn-md">BOOK NOW</button></div>
</div>
</div>

Answer 4

您可以使用 CSS 来做到这一点。试试:hover，看看下面的例子。

.container {
  margin: 50px;
}
#textbox {
  position: relative;
  width: 300px;
}
#text {
  position: relative;
  overflow: hidden;
  z-index: 1;
  background-color: #282727;
  text-align: center;
  padding: 10px 10px 10px 10px;
  display: none;
}
#textbox:hover #text {
  display: block;
}

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div id="textbox">
    <img src="http://i.imgur.com/9hr2mlL.png" width="300px">
    <div id="text">
      <button class="btn btn-danger btn-md">MORE INFO</button>
      <button class="btn btn-danger btn-md">BOOK NOW</button>
    </div>
  </div>
</div>