How to Add Captions to CSS3 Images

By John Paul Mueller

You might be wondering what sort of content could go with an <img> tag in CSS3. You could add buttons, say, to move from one image to another in a gallery. However, it’s more common to add a caption so that people looking at the site have some idea of what the image is all about. The following procedure describes how to add a caption to the image.

  1. Add the following tag (in bold) to the <div> found in the SimpleGraphics.HTML file and save the file.

    <div id="ImageContainer">
     <img alt="A Picture of a Cute Cat."
     title="A Picture of a Cute Cat."
     src="CuteCat.JPG" />
     <p>A picture of a cute cat!</p>
  2. Add the following style to the SimpleGraphics.CSS file.

    #ImageContainer p
     text-align: center;
     height: 20px;
     width: 400px;
     margin: 0px;

    It’s possible to add any amount of text formatting desired. However, you must provide a text element of a specific size or else the border might appear in a place other than where you’d like it to appear.

  3. Modify the #ImageContainer height property to accommodate the new text element. The property should look like this:

    height: 420px;

    Any time you add new features to the container, you must resize the container to hold them. The original container size was 400 pixels. You’ve added 20 pixels worth of text, so the new size is 420px.

  4. Save the CSS file and reload the page.

    The image now includes a caption.