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