CSS Overlay woes

Question

I have some image thumbnails and, on hover, I want the title to be displayed on top of a transparent black <div> overlay which covers the width and height of the thumbnail.

I'm using display: table and display: table-cell; respectively (to allow for vertical middle positioning).

However, every time I try this, the overlay <div> is acting as a small strip rather than covering the whole <div>.

I've tried adding padding and margins but am still unable to get my desired behaviour.

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

The 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;
}
}

and the 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>

How can I alter my css/html to get my desired behaviour?

Answer 1

In order to have the table take up 100% height, it needs to have a height context to reference (since no parent is set to any 'height', it collapses). Your problem can be solved by adding a wrapper to your table that sets that context, and adding height:100%; to your display:table; element.

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

Answer 2

You could easily solve this by using a bit of jquery like so. Demo can be found here.

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

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