懸停狀態下顯示的圖片上的文字

我試圖讓懸停狀態下的圖片顯示一些文字（http://francescaponzini.com/kay/）。到目前爲止，我已經設法用CSS來做到這一點。但是，我正在爲這個定位而苦苦掙扎。我希望在用戶懸停圖像的任何一點時顯示文本。我嘗試過使用絕對和相對的位置，但沒有成功。懸停狀態下顯示的圖片上的文字

有沒有辦法讓包含文本的div假定圖像的維度相同？

這是到目前爲止我的代碼：

<a class="image_link" href="http://francescaponzini.com/kay/?p=106"> 
    <img src="http://francescaponzini.com/kay/wp-content/uploads/2014/06/Firstname.png" width="450" height="575" alt="" style="width: 243px;">  
    <div class="text-content">Place Name</div> 
</a>

知道的任何幫助或暗示感謝所有。

來源

2014-07-20 user2834426

請出示的相關CSS問題 – Popnoodles

我寫了一個類似問題的答案[這裏]（http://stackoverflow.com/questions/24794985/jquery-is-it-possible-to-use-slideup-and-append-text-at-the -same時間/ 24795314＃24795314）。如果你不想過渡，那麼你需要的唯一CSS就是'#parentDiv：hover #description {display：block}'和'#description {display：none;}'，以及'＃description'的正確位置。 – royhowie

他必須從.text-content中刪除'opacity：0'。 –

.image_link:hover .text-content { 
    opacity: 1; 
}

來源

2014-07-20 15:44:44 smistry

這個作品呢！非常感謝 – user2834426

更改包裝環節的display並給予postition：

body.home .hentry > a { 
    position: relative; 
    display: block; 
    ... 
}

位置內容分塊，使之充滿纏繞元件：

.text-content { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    /* Remove width and height declarations */ 
    ... 
}

來源

2014-07-20 15:47:36 JoeJ

我覺得我可能誤解了「是否有一種方法讓包含文本的div假定圖像具有相同的維度」... – JoeJ

我想讓位於懸停狀態的文本顯示爲中心在圖像內 - 這就是爲什麼我認爲我需要div .text-content成爲image_link的同一維度。但我可能是錯的... – user2834426

懸停狀態下顯示的圖片上的文字

回答

相關問題