Create nice image caption with CSS

Create a nice image caption with cssTraditionally, image captions are displayed next to, or below a image. However if you have limited space, or want to increase the visibility of the caption, displaying the image caption as part of the image can be interesting.

In this post you’ll learn a  simple CSS trick, that makes it easy to ad a image caption as a overlay on your images.

CSS image caption

The basic idea behind this image caption effect, is to add a semi transparent overlay at the bottom of the photo, where the image caption can be written in plain text.


<STYLE TYPE="text/css">
 .img-desc {
 position: relative;
 display: block;
 height:332px;
 width: 500px;
}
.img-desc icap {
 background: #111;
 filter:alpha(opacity=65);
 opacity:.65;
 color: #fff;
 position: absolute;
 bottom: 0;
 left: 0;
 width: 480px;
 padding: 10px;
 border-top: 1px solid #999;
}

To display a image with a css image caption, you simply create a new DIV that contains both image and caption, and then create a custom CSS class <icap> that contains the image caption.

<pre id="line29"><div class="img-desc">
	<img src="<a href="view-source:http://tips4php.net/docs/img/beach.jpg">img/beach.jpg</a>" alt="" />
	<icap>Nice sunset over a beach near a big city</icap>
</div></pre>

This image has a plain text caption as overlay, generated by CSS

See example here

Conclusion

Please notice, that to make this effect look nice you need to specify image width and height in the CSS. This means that this effect is primarily useful for images that have the same size. The effect is easy to implement, and you can even display links in the image cation text if you like. In some cases the link color might need to be changed as the default blue link color can be difficult to see in come cases.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

Trackbacks for this post

  1. Tweets that mention Create nice image caption with CSS | Tips4PHP -- Topsy.com

Comments are now closed for this article.