Create Simple Captions using CSS

Let’s create some interesting image captions using css. To find free photos, check out this article “40 Free Stock Photo Sites”.  The image I selected came from Stock.xchng*Please note that the gray border around each example is styling from The Web Squeeze. Your examples will not have the gray border.

Heading

The most basic caption can be created using any of the heading tags.  In this example, I’ve used an h2 which is defined with Tahoma in a size of 22px.  Simple right?

The html…

<div class=&quot;box&quot;>
<h2&quot;Piping Hot Pepperoni Pizza</h2>
<img src=&quot;pizza.jpg&quot; width=&quot;300&quot; height=&quot;199&quot;; alt=&quot;Pepperoni Pizza&quot; >
</div>

The CSS…

  .box {
   width: 300px;
}
h2 {
font-family: Tahoma, Geneva, sans-serif;
font-size: 22px;
color: #000;
}
  

Dark Background With Light Text


In this example the styling of this caption is actually done in the containing div, which in this case is .box2.

Here is what the html looks like…

 <div class=&quot;box2&quot;>Piping Hot Pepperoni Pizza<img src=&quot;pizza.jpg&quot; width=&quot;300&quot; height=&quot;199&quot; alt=&quot;Pepperoni Pizza&quot; ></div>

The CSS…

.box2 {
font-family: Tahoma, Geneva, sans-serif;
font-size: 18px;
font-weight: bold;
color: #FFF;
background-color: #A42A1D;
text-align: center;
height: 210px;
width: 300px;
}

The height and width are both determined by the height and width of the image.  Setting the height for this div, is important if you don’t want the deep red background to show under the image.  Try this styling without the height attribute.  You’ll see what I mean.

Caption On Top of Image

This example uses the image as the background of the box3 div.

Take a look at the html…

<div class=&quot;box3&quot;>Piping Hot Pepperoni Pizza</div>

You can’t get any simpler than that can you! The magic is always in the CSS!

Check it out…

.box3 {
width: 298px;
background-image: url(/web-design-tutorials/pizza.jpg);
height: 199px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 18px;
color: #FF0;
padding-left: 2px;
}

Looking more closely at the css you’ll see in the first line that I set the width of the div.  The image is actually 300px in width so why did I set the width at 298px?  Because I didn’t want the text to sit on the left margin of the photo I added two 2 pixels of padding-left.  Whenever you add padding you must deduct that amount from the overall width or height. As you can see the pizza is now the background image of the div.  That leaves me all the room inside the div to place my text.  And the text will now appear to be over the photo.  Whenever you use a background image in a div, you will have to set the height in order to see the entire image. Again, if you aren’t sure what I mean by not seeing the entire image, delete the height, and you’ll see the difference.

Side Vertical Caption


I’m not going to lie, I love this one.
I found with this caption technique you have to set a div height otherwise you will see very different effects in Firefox versus Internet Explorer.

Here is the HTML for this…

 <div class=&quot;box4&quot;>
 <img src=&quot;pizza.jpg&quot; alt=&quot;pizza&quot; width=&quot;300&quot; height=&quot;199&quot; class=&quot;float-left&quot;>
  P<br />
  I<br />
  Z<br />
  Z<br />
A</div>

The CSS…

.box4 {
width: 325px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
background-color: #F5ECA7;
height: 199px;
}

.float-left {
float: left;
padding-right: 5px;
}

This technique uses two css classes. The first is the box4 div class.  This holds all the styling of the text and also the dimensions of the div.  In order to get the wording off to one side, you need to use a float.  In this example I used float: left; but you could certainly use a right float and have the text appear on the left side of the image.  The key to making this work is selecting the right width of the box. With a 24 px font, I had to play around with the width of the box until I was able to get enough spacing for each letter.  By putting a line break after each letter, I got this really fun vertical text.

Caption With Additional Text


This example shows a colored background area with two differently styled text areas.
Let me first show you the html and css and then we’ll talk about why and how.

HTML…

 <div class=&quot;box5&quot;><img src=&quot;pizza.jpg&quot; width=&quot;300&quot; height=&quot;199&quot; alt=&quot;Pizza&quot; /><br />
<span class=&quot;large-text&quot;>Piping Hot Pepperoni Pizza</span><br />
<span class=&quot;small-text&quot;>Made fresh daily, our pizza is hot, cheesy and topped with only the freshest ingredients.&amp;nbsp;</span></div>

The CSS

.box5 {
  width: 300px;
  background-color: #DE9749;
  }
  .large-text {
  padding-left: 3px;
  font-size: 18px;
  font-weight: bold;
  color: #552B00;
  font-family: Tahoma, Geneva, sans-serif;
  }
  .small-text {
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 12px;
  color: #090400;
  display: block;
  padding: 0px 5px 5px 5px;
  }

Let’s look at .div5.  Simple code.  I just gave the div a width and added a background color.  The large-text div isn’t much more complicated.  This is how I styled the first line of larger text.  You could use a h2, h3, etc.  here if it suits your website but I’m pretending that my website doesn’t deserve a heading. The only added styling is a padding-left of 3 pixels so the text doesn’t sit directly on the left margin.

The small-text class has two added features.  Display: block; was added so that the entire block of text which spans several lines all align together.  If you didn’t use display: block; the second line of text would not be indented like the first line. I also added some padding to give the text some breathing room.

Here are 5 examples of adding interesting captions.  I hope you feel comfortable adding some interest to your websites and exploring ways to make my code your own.

8 Comments on "Create Simple Captions using CSS"

  1. I think we can make the effect more beautiful by applying opacity for text when it covers the image.

  2. Monie says:

    More interesting if we have a working example :)
    Nice simple tips by the way…

    • The images above aren’t enough? LOL

      • Nice tutorial. Going vertical, utilizing color and ‘sub’captioning.. pretty much everything standardly possible.

        Can’t wait for CSS3, opacity and rgba (a for alpha) to become standard. Using transparent .pngs isn’t very script/ size/ simpler mobile device friendly but the .png format is accepted pretty widely otherwise . If it’s your goal to bleed text into the background it’ll be easy .. eg. (pseudo coded) Works (on some browsers already) nicely with magazine styled emphasis or quote blocks

  3. Todd says:

    Not digging the break tags, they’re too ugly to be in my markup anyhow. I would probably (for the vertical caption) place a span class, or a p class on the letters and float/clear left/right. Haven’t tested that out in all browsers, but I may do so to see if I can get cleaner markup. I just can’t stand break tags and how a bunch of them look strung together. Nice job on the other examples, though.

    • You are right Todd. If the width of the div isn’t too wide and the image floated left the letters will stack up. If you allow the div width to be too wide, you might end up with two or more letters on one line. In that situation, the ugly break is an easy fix. I’ll have to play around with your idea and see how it responds in all the browsers.

      • Todd says:

        http://six03.com/lab/caption/

        Grab the source if you want & tweak. Tested it in a few browsers (PC/Mac – The usual suspects).

        I just coded from scratch, nothing big. Seems to work. Might be a little more code all-around, but I’d rather have another 1 byte in file-size than those ugly break tags. :)

Got something to say? Go for it!