CSS: Text over Image – Add Text Caption to Images

by Yang Yang on February 8, 2009

in CSS & HTML Tips

Putting text over image or pictures is a good way to give simple title information to that image or declare copyrights without tampering with the image itself.

Real texts on an image with CSS
text over image demo in html & css

This lovely image gladly demonstrates how I (this text) can be flying over her face.

It’s very kind of her but don’t you agree that this place needs a camp fire and a little love?

The HTML
<div class="image">
  <img alt="" src="http://www.kavoir.com/img/text-over-image.jpg" />
  <div class="text">
    <p>This lovely image gladly demonstrates how I (this text) can be flying over her face.</p>
    <p>It's very kind of her but don't you agree that this place needs a camp fire and a little love?</p>
  </div>
</div>
The CSS
.image {
	position:relative;
	float:left; /* optional */
}
.image .text {
	position:absolute;
	top:10px; /* in conjunction with left property, decides the text position */
	left:10px;
	width:300px; /* optional, though better have one */
}

To position the text somewhere just modify the top and left property. For instance, place them at the the bottom right of the photo, just use right:10px and bottom:10px.

To have more than one text paragraphs positioned at different portion of the image, just add more <div class=”text”></div> and style them separately.

Related Posts

{ 5 comments… read them below or add one }

Stephen February 25, 2010 at 6:08 pm

Worked a charm, thanks!

Reply

Yang Yang February 26, 2010 at 4:50 pm

Awesome!

Reply

helloworlder July 7, 2010 at 4:37 pm

Thanks, this is great! Some examples use a background image, which I think is often semantically incorrect.

Reply

Vernon July 28, 2010 at 4:34 pm

Thank you so much. I was also trying to avoid using a background image, as it was hard to size it within the space (when the image is changing dynamically and not the same size). As usual, a css positioning problems that I have been struggling with for an hour or so has such a simple solution.

Reply

finieramos July 30, 2010 at 9:06 am

I try to use this method where i put a text and another php object and placed it on the image which i add a link on the image..but it wont work in Internet explorer, works only in morzilla and google chrome…help!!

Reply

Leave a Comment

Previous post:

Next post: