Overlay Text On Images With CSS

Image 1

Image 2

Image 3

The code to generate the above effect is below:

<style type="text/css">

	.wrap {
	  /* force the div to properly contain the floated images: */
	  position:relative;
	  float:left;
	  clear:none;
	  overflow:hidden;
	}
	.wrap img {
	  position:relative;
	  z-index:1;
	}
	.wrap .desc {
	  display:block;
	  position:absolute;
	  width:100%;
	  top:30%;
	  left:0;
	  z-index:2;
	  text-align:center;
	}
</style>

<div class="wrap">
	<img src="http://developit.ca/images/editor-uploads/developit.png" />
	<h3 class="desc">Image 1</h3>

</div>
<div class="wrap">
	<img src="http://developit.ca/images/editor-uploads/developit.png" />
	<h3 class="desc">Image 2</h3>

</div>
<div class="wrap">
	<img src="http://developit.ca/images/editor-uploads/developit.png" />
	<h3 class="desc">Image 3</h3>

</div>