jquery - 使用 css3 过渡使 div 在单击和悬停时向上滑动

Question

我想知道是否有人可以帮助我。我想创建一个点击和悬停效果，将一个 div 作为一种覆盖显示在另一个 div 上。我更喜欢使用 css3 转换，但如果我必须用 jquery 来做，我会做。

我在网上找到了一些东西，比如 http://jsfiddle.net/UezUj/1/然而，这更像是一种滑动切换效果，而且走错了路。我想创建类似 http://www.ashtonsmith.co.uk/ 的东西(如果您将鼠标悬停在分销和物流上)但标题会向上滑动以显示内容。

        <div class="col-md-4 box__industries">
                <div>
                <div class="image fill">

            <img src="http://lorempixel.com/g/400/200/" width="363"   height="159">

                </div>
                <div class="content">
                  <h5>Title</h5>
                   This is my content
                </div>

                </div>
              </div>    

我希望 div .content 在点击和悬停时在图像上滑动。

提前致谢。

Answer 1

请尝试下面的代码:

.box_industries
{
  background: green;
  overflow: hidden;
  text-align: center;
  position: relative;
}

.box_industries .content
{
  background: rgba( 0, 0, 0, 0.9 );
  bottom: -100%;
  color: #fff;
  height: 100%;
  left: 0%;
  text-align: center;
  position: absolute;
  transition: bottom 0.5s ease;
  width: 100%;
}
.box_industries:hover .content
{
  bottom: 0%;
}

 <div class="col-md-4 box_industries">
     <div>
         <div class="image fill">
             <img src="http://lorempixel.com/g/400/200/" width="363"   height="159">
         </div>
         <div class="content">
             <h5>Title</h5>
                 This is my content
         </div>
     </div>
 </div>