Overlay a div to the dimensions of an image

Question

This is a slightly fiddly question- essentially, I am making a grid of images where a coloured overlay (div) is displayed upon rollover, with a bit of text within that div. This is very similar to this website- http://twoarmsinc.com/work/category/all. To do this with a div instead instead of an image would be easy- you would nest the overlay inside the other div and set width and height to 100%. However, since you can't nest within an image, and the image is responsively changing size, how should I go about this? I'm not sure background-image will work because I am using a responsive grid system (Simple Grid).

Here's a CodePen: http://codepen.io/anon/pen/iIsGm/

html:

<div>
   <div class='overlay'></div>
   <img src="http://placekitten.com/300/200" alt="thumb">
</div>

css:

.overlay{
width:100%;
height:100%;
background:#333;
position:relative;
z-index:10;
}

Apologies for the ambiguity- any and all help is greatly appreciated!

Answer 1

You will first need to swap .overlay with the img, so it comes second in the stack.

You have some options for the .container div, but you'll need to set a width to set up a grid. I didn't include it in the fiddle, but you will likely want to set img to max-width: 100%; width: auto; height: auto;, so they can resize and keep their aspect ratios when the browser is resized. For .container, you can also use float: left with a set width. I used display: inline-block here to reduce the amount of code.

DEMO

DEMO with multiple divs floating and simple grid

CSS:

.overlay{
    background:rgba(0,0,0,0.5);
    position:absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    color: white;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

img {
  display: block;  
}
.container {
    position: relative;
    display: inline-block;
}

.container:hover > .overlay {
    opacity: 1;
}

HTML:

<div class="container">
    <img src="http://placekitten.com/300/200" alt="thumb">
    <div class='overlay'>Some text</div>
</div>