How do I caption side-by-side images in HTML

Community Off Topic
#1

Beginner here…

  • Creating a web page to display two side-by-side images
  • Attempting to caption each image with the text ‘before’ and ‘after’ above each image and left justified
  • Both images are correctly displaying side-by-side and the text ‘before’ is exactly where I want it to be (left justified above the first image), however the text ‘after’ displays directly next to the ‘before’ text (also above the first image)
  • How do I move/code the word ‘before’ to display left justified above the second image?

What is wrong with my code?

USERNAME

BEFORE AFTER

"insert before image here""insert after image here"

img{ width: 300px; height: 200px; margin: 20px float:left; }

1 Like
#2

Could you post the entire contents of your code, or at least a bit more of the pertenant parts here? Don’t forget to use the Preformatted text button at the top of this textarea to make sure it is formatted and shown properly.

1 Like
#3

Speculative code; still need to run it…

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
img {
  display: inline-block;
  width: 50%;
}
img:after {
  content: "<span>Caption</span>";
}
</style>
</head>
<body>
<img src="https://www.codecademy.com/assets/logo/logo--dark-blue.svg">
<img src="https://www.codecademy.com/assets/logo/logo--dark-blue.svg">
</body>
</html>
2 Likes
#4

Okay, that was theoretical and almost worked. This one does…

<!DOCTYPE html>
<html>
<head>
<title>Adaptive Side by Side IMG with Caption</title>
<style>
div {
  display: inline-block;
  width: 49%;
}
img {
  width: 100%;
}
div::after {
  content: '~'; /* in absence of caption the block will be sustained */
  display: block;
  color: #fff;
  background: #1f4056;
  text-align: center;
  margin: 2px auto;
  line-height: 1.8em;    /* puts some darkspace under the g */
}
div:first-child::after {
  content: "Codecademy trademark";
}
div:last-child::after {
  content: "Codecademy logo";
}
</style>
</head>
<body>
<div><img src="https://www.codecademy.com/assets/logo/logo--dark-blue.svg"></div>
<div><img src="https://www.codecademy.com/assets/logo/logo--dark-blue.svg"></div>
</body>
</html>

side-by-side

Side by Side w/caption

2 Likes
#5

Thank you all for replying…appreciate that!

Whenever I try and post my full code, a popup displays saying new users can only put one image in a post. That being said…here is another attempt:

Some text here

Person's name here

BEFORE AFTER

    <strong><alt="BEFORE" src='before' image here style="width: 300px; height: 200px; margin: 20px" />
    <strong><alt="AFTER" src='after' image here style="width: 300px; height: 200px; margin: 20px" />
        </strong><p>

So what happens is…my two images align perfectly, but the captions above each one of them “Before” and “After” end up displaying side-by-side above the first image. I want “Before” left justified above the first image and I want “After” left justified above the second image. I know it’s close…if I could just figure out how to move the “Before” text to above the second image, I’d be set. If only I could ‘tab’ 5 times, it would work, but that’s word, not HTML.

1 Like
#6

47 AM
e1e5354cf48aa7eefd2b9b99830354407d9477aa.png1045×156 22.9 KB

#7

The code above results in my page looking like this:

16 AM

#8

My bad… I had interpreted your question as a pseudo-element related question so tackled it from that angle.

Your code above shows fixed image sizes, so let’s approach it with fixed structure that does not need to be adaptive, but static.

Start with a parent container just slightly wider than the sum of the two widths.

<div class="before-after">

</div>

container CSS

/* allow for border on each image and even whitespace around the images */

.before-after {
    width: 610px;
    margin: 1em auto;
 }

Now we can mark up the two captions as paragraphs, each spanning half of the width, above the images.

<div class="before-after">
  <p>BEFORE</p><p>AFTER</p>
</div>

caption css

.before-after p {
    display: inline-block;
    line-height: 1.8em;
    text-align: center;
    width: 49%;
}

Now we can mark up the image tags…

<div class="before-after">
  <p>BEFORE</p><p>AFTER</p>
  <img src="https://goo.gl/bHBjLb" alt="BEFORE">
  <img src="https://goo.gl/bHBjLb" alt="AFTER">
</div>

img css

.before-after img {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    margin: 2px;
 }

That’s the theoretical. Now for the practical…

<!DOCTYPE html>
<html>
<head>
<title>Before and After</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
    <div class="before-after">
      <p>BEFORE</p><p>AFTER</p>
      <img src="https://goo.gl/bHBjLb" alt="BEFORE">
      <img src="https://goo.gl/bHBjLb" alt="AFTER">
    </div>
</body>
</html>

style.css

.before-after {
    width: 608px;
    margin: 1em auto;
    border: 1px dotted #1f4056;
    padding: 0 4px;
 }
.before-after p {
    display: inline-block;
    line-height: 1.8em;
    text-align: center;
    width: 49%;
    margin: 0;
}
.before-after img {
    width: 300px;
    height: 200px;
    border: 1px solid black;
 }

before and after

before-after

As you will see in the codebit demo, the container is re-usable in the same document. The two text elements that precede the before and after pics in your code would be above each .before-after container and not inside them.

    <p>Insert text here</p>
    <p>Insert name here</p>
    <div class="before-after">
      <p>BEFORE</p><p>AFTER</p>
      <img src="https://goo.gl/bHBjLb" alt="BEFORE">
      <img src="https://goo.gl/bHBjLb" alt="AFTER">
    </div>

While it would add structure, the above would fit nicely into a container with its own class (which is also re-usable in the same document).

<div class="testimonial">
    <p>Insert text here</p>
    <p>Insert name here</p>
    <div class="before-after">
      <p>BEFORE</p><p>AFTER</p>
      <img src="https://goo.gl/bHBjLb" alt="BEFORE">
      <img src="https://goo.gl/bHBjLb" alt="AFTER">
    </div>
</div>

Style rules for the paragraphs would need to be above the earlier style rules in the cascade so as not to interfere with those in the before-after containers.

.testimonial p {
    /* declarations */
}
.before-after {

}
...
1 Like