顯示文本當鼠標懸停在圖片鏈接

我已經看了這裏（How to show text on image when hovering?），以找到一個解決這個問題，但它不100％的工作......由於該段位於圖像的圖像部分下面不是蓋的當你懸停在它上面。當您將鼠標懸停在圖像上時，我希望文本覆蓋整個圖像。（看看這個：http://jsfiddle.net/rMhGE/或以下）。顯示文本當鼠標懸停在圖片鏈接

的HTML

<body> 
     <div class="cube1"> 

      <a href="http://google.com"><img src="http://us.123rf.com/400wm/400/400/busja/busja1209/busja120900010/15099001-detailed-vector-image-of-symbol-of-london--best-known-british-double-decker-bus.jpg"> 
      <p class="contact">Random Text Here</p></a> 
     </div> 
</body>

任何幫助表示讚賞的CSS

.cube1 { 
    position: relative; 
    width: 400px; 
    height: 400px; 
    float: left; 
} 

.contact { 
    overflow: hidden; 
    position: absolute; 
    width: 400px; 
    height: 386px; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: rgba(255,255,255,0.95); 
    color: #aaa; 
    visibility: hidden; 
    opacity: 0; 
} 

.cube1:hover .contact { 
    visibility: visible; 
    opacity: 1; 
}

。謝謝。

來源

2013-08-25 roryjt

答案。但可能你應該擺脫可見度和不透明度，只使用顯示。 –

從刪除聯繫人的高度。以及保證金。如果使用絕對0 0 0 0方法進行拉伸，則也不需要寬度值。

.contact { 
    overflow: hidden; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: rgba(255,255,255,0.95); 
    color: #aaa; 
    visibility: hidden; 
    opacity: 0; 
    margin: 0; 
}

來源

2013-08-25 03:39:01 Jeffpowrs

爲什麼我收到-1？ – Jeffpowrs

+1 counter -1 – syb0rg

哈，謝謝@ syb0rg。 – Jeffpowrs

圖像上方有文字，我不知道你正試圖在這裏做。「覆蓋圖像」是什麼意思？

來源

2013-08-25 03:34:38 gespinha

變化p元素的p {margin:0px}或爲該類

.contact { 
    overflow: hidden; 
    position: absolute; 
    width: 400px; 
    height: 395px;//change height also to cover it completly 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: rgba(255,255,255,0.95); 
    color: #aaa; 
    visibility: hidden; 
    opacity: 0; 
    margin:0px 
}

來源

2013-08-25 03:35:01

.contact {margin-top：0px; } –

@gp雅其方式.. –

您需要的「P」元素上設置餘量爲0，並且「高度」，以400：