Question

我希望在将鼠标悬停在div上时有一个上滑效果。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如果只使用CSS完成它会很棒。当我将鼠标悬停在图像上时，我想向上滑动预览按钮div。

谢谢。

任何帮助都会很棒。

Answer 1

使用100％宽度和-60％隐藏预览按钮。（如果使用100％宽度，则幻灯片将响应并且向上滑动按钮正常工作）

＆＃13;

  .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;}

＆＃13;

  <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>

＆＃13;

Answer 2

一个简单的转换：div上的translateY（）应该为你做。我通常使用px或％和translate-property，如下所示：变换：translateY（-10％）;

过渡属性不是必需的，但我建议它，以使动画更流畅。你必须要考虑转换的速度，但一般来说0.1s - 0.4s（100-400毫秒）是网页上动画的推荐速度。

希望这有帮助。

Answer 3

这是一个示例，但您必须将其集成到您自己的代码中，因此您也可以学习：P

＆＃13;

 .hide {
    overflow: hidden;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    -moz-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}
 h1:hover + .hide {
    -moz-transition-duration: 2s;
    -webkit-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
    max-height: 1000px;
    overflow: hidden;
}

＆＃13;

<h1><a href="#">Show Test</a></h1>
<p class="hide">I'm a barbie girl in a barbie world. All is plastic, its fantastic!</p>

＆＃13;

向上滑动悬停在图像上

3 个答案: