Featured Article Container with Image overlayed by Post info - html

Question

What I am trying to achieve seems relatively simple, but I can't seem to get it to work.
I want to have my article previews on my website appear in tiled form.
The tiles, for the sake of the argument would be a fixed height and width. Lets say 300px by 300px.
I want then for the title of the article and perhaps even a short excerpt to appear, overlaying the image. Kind of like what theverge.com have.
What I need help with is that Im just trying to do a proof of concept mock up. I can do the specific styling fine myself but its literally just the structure I cant seem to figure out.
I cant seem to get the h1 to overlay the img.
I've tried creating a parent container div, and then containing both elements within separate div containers and giving the container with the h1 or "post info" absolute positioning.
But It never seems to work out quite right.
HTML:
<div class="container">
<div class="feat-img">
<img src="www.sample.com"/>
</div>
<div class="post-info">
<h1>Post Title</h1>
</div>
</div>
CSS:
.container: {width: 300px; height:300px;float:left;}
.feat-img img: {width:300px; height:300px; float:left;}
.post-info: {position:absolute;bottom:0px;}
Ok so I know there is a lot wrong with that style but I just did it off the top of my head there. It has the general jist of my train of thought.
Any help would be greatly appreciated as I havent found anything (Probably becuase I dont really know what Im searching for)

Answer 1

First, you need to know how an absolute div relates to a relative one.
Add
.feat-img {
position:relative;
height:300px;
width:300px;
}
to your CSS,
and place the .post-info div inside the .feat-img div:
<div class="feat-img">
<div class="post-info">
<h1>Post Title</h1>
</div>
<img src="image.jpg"/>
</div>
apply this CSS:
.post-info {
position:absolute;
bottom:0px; /* or whatever position */
left:0px; /* or whatever position */
}
Please have a look at this jsFiddle for a quick mockup: http://jsfiddle.net/ZJT6f/
Cheers,
Jeroen

Answer 2

look on this:
demo
html code:
<div class="container">
<div class="feat-img"><img src="http://lorempixel.com/300/300/"/></div>
<div class="post-info"><h1>Post Title</h1></div>
</div>
css code:
*{margin:0; padding:0}
.container: {width: 300px; height:300px; display:block; position: relative;}
.feat-img img: {width:300px; height:300px; position:absolute; top:0; left:0; display:block;}
.post-info{position:absolute; top:130px; left:0; display:block; width:300px; height:300px; text-align: center; color:#fff;}