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.

Recommended further reading:

---

CSS: The Missing Manual Cascading Style Sheets can turn humdrum websites into highly-functional, professional-looking destinations, but many designers merely treat CSS as window-dressing to spruce up their site’s appearance. You can tap into the real power of this tool with CSS: The Missing Manual….

---

Stunning CSS3: A project-based guide to the latest in CSS (Voices That Matter) CSS3 adds powerful new functionality to the web’s visual style language to help you create beautiful and engaging designs more easily than ever. With CSS3, you can create eye-catching visual effects such as semitransparent backgrounds, gradients, and drop shadows without…

---

Stylin’ with CSS: A Designer’s Guide (2nd Edition) Cascading Style Sheets enable you to rapidly create web designs that can be shared by hundreds or even thousands of web pages. It accelerates development cycles by centralizing text and layout information for easy editing and updates. This book teaches…