让div滑动点击并使用css3转换悬停

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。内容在点击和悬停时在图片上滑动。

在此先感谢。

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>

Answer 2

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

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

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