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