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

【问题标题】：Make a div slide up on click and hover using css3 transitions使用 css3 过渡使 div 在单击和悬停时向上滑动
【发布时间】：2016-11-13 15:09:18
【问题描述】：

我想知道是否有人可以帮助我。我想创建一个点击和悬停效果，在另一个 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 在单击和悬停时在图像上向上滑动。

提前致谢。

【问题讨论】：

标签： jquery html css css-transitions

【解决方案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%;
height:10%;
}

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

【讨论】：

【解决方案2】：

请尝试以下代码：

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

【讨论】：

【解决方案3】：

试试这个。虽然，在这一个中，文字在图片下方，只有 css，没有 js。这是在codepen中。希望对您有所帮助。

http://codepen.io/the-afshin/pen/mEBNjA

但无论如何这里是 css：

.wrapper {
   margin: 0;
   padding: 0;
}
.image {
   margin: 0;
   padding: 0;
}
.content  {
  color: blue;
  font-size: 35px;
  padding: 0;
  margin: 0;
}
.main {
   border: 2px solid red;
   display: inline-block;
 }

.main:hover {
   transform: translateY(-100px);
   transition: transform 2s;
 }

还有html：

<div class="col-md-4 box__industries wrapper">

            <div class="image fill">

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

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

            </div>
   </div>

【讨论】：

【解决方案4】：

您正在寻找这样的东西吗？我刚刚写了一些简单的代码，以便于理解。让我知道你的评论如果有的话。

.box-wrapper {
  display: block;
  position: relative;
  z-index: 1;
  width: 200px;
  height: 200px;
  background: url('http://lorempixel.com/200/200/') #808080 no-repeat center center;
  overflow: hidden;
  /*hidden the content inside*/
}
.box-content {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 200px;
  /*make the content lies under wrapper*/
  background: rgba(128, 128, 128, 0.8);
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  /*make the smooth transition in 0.3s*/
  color: #fff;
}
.box-wrapper:hover .box-content {
  top: 0;
  /*bring the content back*/
}

<a class="box-wrapper" href="#">
  <div class="box-content">
    <h1>Content</h1>
  </div>
</a>

【讨论】：