This is what I’m going to show you how to do:

It’s a nice effect that can be used for many things, for a nice gallery or something. You could combine this with some JS, add a hover effect to the picture and have it display the caption.

edit: theodin posted a comment with a link to this kind of effect, check it out at buildinternet.com

This is a pretty simple trick that works in different browsers except for older IE versions I think (because IE seems to hate transparent png’s). Btw, RIP, IE6.

Let me show you the code and then explain how it works:

<div style="width: 300px; height: 224px; position: relative;">
    <div style="position: absolute; bottom: 0px; _bottom: 4px; width: 100%; background: transparent url('http://zurka.us/bg_overlay_black.png') repeat scroll 0 0; font-family: verdana; font-size: 11px;">
        <div style="color: #fff; margin: 10px; text-align: center; position: relative; z-index: 1;">This is Kakashi from the Naruto anime.</div>
    </div>
    <img src="http://www.quizilla.com/user_images/K/KA/KAK/kakashihatake1226/1158375681_resKAKASHI.jpg" width="300" />
</div>

So basically what we are doing is enclose our image in a relatively positioned DIV element. Inside this element we create another DIV element, absolutely positioned. We stick it on the bottom of it’s parents div, so it goes displayed on the bottom (we could position it on the top if wanted). The background of this div is a semi-transparent black PNG image, 1x1px (http://zurka.us/bg_overlay_black.png). This is our black box, the content holder.

Now what we need to do is add our text to the box. Inside the box we create another DIV, give it a 10px margin (this way it has some space around it), style the text and put it over the other layers with z-index.

And that’s it, we have it done. It’s a simple HTML + CSS effect that I tried to get using different methods (like css opacity and stuff) but didn’t manage to replicate.

Original image: Kakashi at Quizilla

So once again, easy peasy!
Have swing, thanks for reading!