Overlay Text On Images With CSS

Apr0109Apr 01, 09

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>


About Jason Miller:

I am a JavaScript developer from Waterloo, Ontario, Canada. When I am not typing green code onto a black screen, you might find me at the nearest coffee pub checking out the brew. I run a internet firm called developIT and maintain blogs and web apps when I can.
Comments
breisa#
hmmm.. =D
flxzzzz#
YOU SAVED MY LIFE AFTER 3 FUCKING DAYS

FAVORITE
Thanks
jason#
Glad I could help flxzzzz :)
masterofweb#
GOOD !!!, thx
Leave a Comment

Post Comment