Create nice image caption with CSS

Traditionally, 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>

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.