Displaying Image caption with only HTML and CSS - html

Question

I am trying to display caption on images.
This is my HTML
<div class="image-hover">
<div class="image-block">
<a href="" target="_blank" class="image-overlay">
<div class="details">
<h4>Our philosophy and Vision</h4>
</div>
<div class="image-backdrop">
<img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/omr-office.jpg"/>
</div>
</a>
</div>
<div class="image-block">
<a href="" target="_blank" class="image-overlay">
<div class="details">
<h4>Our philosophy and Vision</h4>
</div>
<div class="image-backdrop">
<img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/omr-office.jpg"/>
</div>
</a>
</div>
<div class="image-block">
<a href="" target="_blank" class="image-overlay">
<div class="details">
<h4>Our philosophy and Vision</h4>
</div>
<div class="image-backdrop">
<img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/omr-office.jpg"/>
</div>
</a>
</div>
<div class="image-block">
<a href="" target="_blank" class="image-overlay">
<div class="details">
<h4>Our philosophy and Vision</h4>
</div>
<div class="image-backdrop">
<img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/omr-office.jpg"/>
</div>
</a>
</div>
</div>
This is my CSS :
.image-hover {
overflow: hidden;
}
.image-hover .image-block {
width: 234px;
height: 100px;
display: inline-block;
border: 1px solid #666666;
}
.image-hover .image-block img {
width: 230px;
height: 100px;
border: 2px solid #fff;
}
.details, .image-backdrop {
float: left;
}
.details h4:after {
display: inline-block;
content:" ";
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 8px solid #666666;
margin: 0 10px;
}
This is my JsFiddel
My problem is how can I get image's caption to above of image?
Any comments are greatly welcome.
Thank you.

Answer 1

you should use position:relative; to the container and position:absolute; to the child container whom you want to on image it is styled as you want
http://jsfiddle.net/ADMvd/2/

Answer 2

Add this to your CSS
.details h4 {
color: white; /* just to make it look pretty */
}
.details {
position: absolute;
}
.image-overlay {
position: relative;
}
DEMO
EDIT
Note that you are using div tag inside your a tag so don't forget to add display: block to your a.image-overlay tag because inline elements can't contain any other type of elements. It does work but will cause many weird problems.
For starters height:100% won't work for div inside a