使元素在上下移動

我在網站上有三列，所有三列都有標題和相關文本段落。有一個灰色框用作文本的背景，但我需要灰色框滑動並覆蓋段落文本和列標題。使元素在上下移動

這裏的HTML：

<div class="row"> 
     <div class="span3 lower-columns" id="lower-col-left" style="padding-top:10px;"> 
     Rewards 
     <p class="lower-col-text">placeholder text placeholder text placeholder text placeholder text placeholder text placeholder text placeholder text placeholder text</p> 
     </div> 
     <div class="span3 lower-columns" id="lower-col-mid"> 
     Schedule an Installation 
     <p class="lower-col-text" style="padding-top:30px;">placeholder text placeholder text placeholder text placeholder text placeholder text placeholder text placeholder text placeholder text</p> 
     </div> 
     <div class="span3 lower-columns" id="lower-col-right" style="padding-top:10px;"> 
     Contact Us 
     <p class="lower-col-text">placeholder text placeholder text placeholder text placeholder text placeholder text placeholder text placeholder text placeholder text</p> 
     </div> 

    </div>

這裏的CSS：

.span3.lower-columns { 
    height: 370px; 
    text-align:center; 
    width: 280px; 
    margin-top: 40px; 
    font-size: 28px; 
    background-image: url('/img/lower-col-bg2.png'); 
    background-repeat: no-repeat; 
    background-position-y: 70px; 
    background-size: 290px 290px;

}

這裏是什麼樣子（非懸停）： enter image description here

這裏的背景圖片：

enter image description here

我寧願只使用CSS，但不反對使用jQuery。

謝謝！

編輯：我想出了我自己的，但它不會讓我回答我自己的問題。這裏的CSS，如果有人想知道：

.span3.lower-columns { 
    height: 370px; 
    text-align:center; 
    width: 280px; 
    margin-top: 40px; 
    font-size: 28px; 
    background-image: url('/img/lower-col-bg2.png'); 
    background-repeat: no-repeat; 
    background-position-y: 70px; 
    background-size: 290px 290px; 
    position: relative; 
} 
.span3.lower-columns:hover { 
    background-position-y: 0px; 
    transition: .65s; 
}

來源

2013-07-22 Tim McClure

向我們展示的，你希望它看起來像懸停 –

我自己的。下面是萬一有人在CSS是納悶：

.span3.lower-columns { 
    height: 370px; 
    text-align:center; 
    width: 280px; 
    margin-top: 40px; 
    font-size: 28px; 
    background-image: url('/img/lower-col-bg2.png'); 
    background-repeat: no-repeat; 
    background-position-y: 70px; 
    background-size: 290px 290px; 
    position: relative; 
} 
.span3.lower-columns:hover { 
    background-position-y: 0px; 
    transition: .65s; 
}

來源

2013-08-14 13:16:21

只是使用：懸停。

.span3.lower-columns:hover { 
    background-image: url('/img/lower-col-bg2.png'); 
    background-repeat: no-repeat; 
    background-position-y: 0px; 
}

當然這是假設您想要的標題之下，不是說你要隱藏的文本和標題與灰框中。如果你這樣做（想要用灰色方塊隱藏文本），你可以使用一個單獨的具有z-index屬性的img元素或一個正確大小和顏色的僞元素（with：after）。

來源

2013-07-22 15:27:59 qternion

如果它是背景圖像，它將落後於放置在其上的任何文本。您將不得不創建：懸停並移動背景的位置以使其位於文本所在的位置。那麼問題在於如何擺脫文本？你不能，除非你

答：請用文本的圖像刪除 B：有在div的圖像我想通了就可以把使用過的z-index

.span3.lower-columns:hover { 
    height: 370px; 
    text-align:center; 
    width: 280px; 
    margin-top: 40px; 
    font-size: 28px; 
    background-image: url('/img/lower-col-bg2.png'); 
    background-repeat: no-repeat; 
    background-position-y: 00px; 
    background-size: 290px 290px; 

}

來源

2013-07-22 15:28:21 Keith

好的，謝謝，其實我只是理解了它在我自己的東西的圖像，但它不會讓我回答我自己的問題。 –

使元素在上下移動

回答

相關問題