jquery - 将鼠标悬停在图像上向上滑动

Question

我想在悬停在 div 上时产生向上滑动的效果。

.intro-page__img {
  margin-bottom: 15px;
  border: solid 1px #eee;
  padding: 5px;
  box-shadow: 0 0 3px #eee;
  border-radius: 3px;
}
.intro-page__link:hover {
  color: #666;
}
.theme_view{
  width:100%;
  position:relative;
}
.theme_view .overlay {
  position:absolute;
  display:none;
  left:0;
  right:0;
  bottom:0;
  background-color:#ffffff;
  background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9;
  z-index:9999;
  color:black;
  height:65px;
  border:1px solid #eee;
}
.theme_view:hover .overlay{
  display:block;
  margin-top:-200px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row">
    <div class="col-md-6">
         <div class="theme_view">
              <img class="img-responsive intro-page__img" src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" alt="">
              <div class="overlay">
                   <button class="btn btn-dark custom_button_width margin_top_15">Preview</button>
              </div>
         </div>
    </div>
</div>

如果仅使用 CSS 来完成，那就太好了。当我将鼠标悬停在图像上时，我想向上滑动 Preview Button div。

谢谢。

任何帮助都会很棒。

Answer 1

使用 100% 宽度和 -60% 隐藏预览按钮。(如果您使用 100% 宽度，则滑动将响应并且向上滑动按钮正常工作)

  .intro-page__link:hover {
  color: #666;
  }
  .theme_view{
  width:100%;
  position:relative;
  overflow:hidden;
  }
  .theme_view .overlay {
  position:absolute;
  left:0;
  right:0;
  bottom: -60%;
  transition: all .35s;
  -webkit-transition: all .35s;
  background-color: green;
  text-align: center;
  background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9;
  z-index:9999;
  color:black;
  height:65px;
  border:1px solid #eee;
  }
  .theme_view:hover .overlay{
  bottom:0;
  }
  .btn { margin-top: 12px;}

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="row">
  <div class="col-md-6">
  
  <div class="theme_view">
  <img class="img-responsive intro-page__img" src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" alt="">
  <div class="overlay">
  <button class="btn btn-dark custom_button_width">Preview</button>
  </div>
  </div>
  

  </div>