CSS Overlay woes

我有一些圖像縮略圖，在懸停時，我希望標題顯示在覆蓋縮略圖寬度和高度的透明黑色<div>上。CSS Overlay woes

我分別使用display: table和display: table-cell;（以允許垂直中間定位）。

但是，每次我嘗試此操作時，疊加層<div>都充當小條而不是覆蓋整個<div>。

我試着添加填充和邊距，但我仍然無法得到我想要的行爲。

http://jsfiddle.net/jameshenry/t92qukz8/2/

的CSS：

.griditem { 
    position: relative; 
    background-color: #777; 
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); 
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); 
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); 
    width: 50%; 
    overflow: hidden; 
} 

.titles { 
    position: absolute; 
    display: table; 
    left: 0px; 
    top: 0px; 
    bottom: 0px; 
    right: 0px; 
    width: 100%; 
    opacity:0; 
    -webkit-transition: opacity .5s ease; 
    -moz-transition: opacity .25s ease; 
    background: rgba(0, 0, 0, 0.5); 
    color: #FFFFFF; 
    text-decoration: none; 
    z-index: 999; 
} 

.titles p { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    text-decoration: none; 
} 

.griditem:hover .titles { 
    text-decoration: none; 
    opacity:1; 
} 


h5 { 
    font-family: Helvetica Neue; 
    font-size: 5em; 
    color: #FFFFFF; 
    padding-bottom:0; 
    margin-bottom:-30px; 
} 

h6 { 
    padding-top: 0; 
} 
}

和HTML

<div class="griditem" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/8/80/Aspect_ratio_-_16x9.svg); background-size:100% 100%;"> 
<img src="http://i.imgur.com/JnW9SPx.png" width="100%" alt="Spacer 16x9" /> 
    <a href="http://www.google.com" class="titles"> 
    <p>BIG TEXT<br> 
     small Title<p> 
    </a> 
</div>

我怎樣才能改變我的CSS/HTML得到我想要的行爲？

來源

2015-09-14 hj8ag

提琴是很大的，但請確保您還包括在問題本身完整的攝製，這樣即使鏈路腐爛的問題仍然是有用的。 – Jeroen

@Jeroen會做！ – hj8ag

爲了具有表佔用100％的高度，它需要有一個高度上下文引用（因爲沒有父被設置爲任何「高度」，合攏）。您的問題可以通過向設置該上下文的表添加包裝，並將height:100%;添加到display:table;元素來解決。

.griditem { 
 
    position: relative; 
 
    background-color: #777; 
 
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); 
 
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); 
 
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); 
 
    width: 50%; 
 
    overflow: hidden; 
 
} 
 
/*added overlay CSS*/ 
 
.overlay { 
 
    
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    bottom: 0px; 
 
    right: 0px; 
 

 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.titles { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; /*important, forces to 100% height of parent*/ 
 
    opacity:0; 
 
    -webkit-transition: opacity .5s ease; 
 
    -moz-transition: opacity .25s ease; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: #FFFFFF; 
 
    text-decoration: none; 
 
    z-index: 999; 
 
} 
 

 
.titles p { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    text-decoration: none; 
 
} 
 

 
.griditem:hover .titles { 
 
    text-decoration: none; 
 
    opacity:1; 
 
} 
 

 

 
h5 { 
 
    font-family: Helvetica Neue; 
 
    font-size: 5em; 
 
    color: #FFFFFF; 
 
    padding-bottom:0; 
 
    margin-bottom:-30px; 
 
} 
 

 
h6 { 
 
    padding-top: 0; 
 
}

<div class="griditem" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/8/80/Aspect_ratio_-_16x9.svg); background-size:100% 100%;"> 
 
<img src="http://i.imgur.com/JnW9SPx.png" width="100%" alt="Spacer 16x9" /> 
 

 
    <div class="overlay"> 
 
    
 
     <a href="http://www.google.com" class="titles"> 
 
     <p>BIG TEXT<br> 
 
     small Title<p> 
 
     </a> 
 

 
    </div> 
 

 
</div>

來源

2015-09-14 16:14:36

謝謝傑西，這似乎工作得很好，後見之明似乎非常明顯！不知道爲什麼我沒有嘗試。但是我現在有一個文字顏色的問題：http://jsfiddle.net/jameshenry/t92qukz8/4/ - 這是灰色的而不是白色的，對此有何想法？我猜測文字是在不透明背後渲染的？ – hj8ag

@ hj8ag它看起來像你沒有刪除你的.titles類的絕對位置和其他相關樣式。請參考我的答案，以獲得必要的造型。目前這有點棘手，因爲表格在覆蓋層後面，但是使用它的高度，因爲它仍然是覆蓋div的孩子。 –

你可以很容易地解決這個通過使用像這樣的jQuery位。演示可以找到here。

var pheight = $(".griditem").height(); 
$(".titles p").css("height", pheight); 

$(window).resize(function() { 
    var pheight = $(".griditem").height(); 
    $(".titles p").css("height", pheight); 
});

來源

2015-09-14 16:08:14 TheOnlyError

回答

相關問題