Search code examples
htmlcssfigure

Display image caption on the bottom of the image

I'm trying to display an image caption at the bottom of an image.

enter image description here

That is what I have at present. The caption is supposed to be at the bottom of the image and match its width. The reason that it is not doing so is because the <figure> that contains the image is not resizing to match the image.

<figure class="fig">
    <img src="http://such.url" class="fig__media"/>

    <figcaption class="image-caption-text">Some caption</figcaption>
</figure>

I did some searching and found that typically you need to add display: inline-block, as suggested here. That has no effect here. My suspicion is that this is because the image itself has CSS with position: absolute. If I remove that bit the layout breaks. (Not my CSS and I'm not a web dev.) So it seems like I need a way to get the <figure> to resize even though the image uses absolute position. Or some other way to correctly position the caption.

Solution

  • i would suggest to do it like that position: absolute; for the figcaption not the img that the figure can take the width of the img 

    figure {
  border: 1px solid;
  display: inline-block;
  margin: 0;
  position: relative;
}

figcaption {
  position: absolute;
  bottom: 1em;
  left: 0;
  background-color: yellow;
  width: 100%;
}
    <figure class="fig">
    <img src="http://placehold.it/500x200" class="fig__media"/>

    <figcaption class="image-caption-text">Some caption</figcaption>
</figure>