CODEWITHSUNDEEP
htmlcssimage
Hamza_Ali
Hamza_Ali

Reputation: 13

how to add a caption like text under image in css

Hi I want to add text over an image at its bottom center. Its a photo gallery project so all the images are of different dimensions. Css needs to work with the percentages so it works on images of all sizes

<div class="images">
   <img src="dummy.jpeg">
   <p>Some text to appear>
</div>

I tried reading many questions on stackoverflow but all of them works for one image. I have multiple images with different dimensions.

I want to put the text at the bottom center of the image and a black strip that goes with width 100% over the image. It could be the text background.

Upvotes: 1

Views: 14046

Answers (3)

ADH - THE TECHIE GUY
ADH - THE TECHIE GUY

Reputation: 4373





<!-- comment to fool the edit limiter -->

img{
  width:500px;
  height:200px;
  }
.images{
  width:500px;
  height:200px;
  align-items:center;
  position:relative;
  
  }
p{
  position:absolute;
  bottom:0;
  color:yellow;
  left:50%;
  }
span{
  position: relative;
  left: -50%;
  }


<div class="images">
   <img src="https://i.sstatic.net/wwy2w.jpg">
   <p><span>Some text to appear></span></p>
</div>

Upvotes: 0

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

You can use CSS Flexbox. And for the text at the bottom of each image use position: absolute and making your parent position: relative.

Have a look at the snippet below:

.images {
  display: flex;
  padding: 5px;
}
.img-holder {
  position: relative;
  margin: 5px;
  align-self: flex-start;
}
.img-holder p {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  margin: 0;
}
<div class="images">
  <div class="img-holder">
    <img src="http://placehold.it/100x100">
    <p>Some text</p>
  </div>
  <div class="img-holder">
    <img src="http://placehold.it/120x120">
    <p>Some text</p>
  </div>
  <div class="img-holder">
    <img src="http://placehold.it/150x150">
    <p>Some text</p>
  </div>
</div>

Hope this helps!

Upvotes: 0

pol
pol

Reputation: 2701

Use absolute positioning on the caption <p>
Make the container inline-block
Fiddle: jsfiddle.net/eohtwd1u

.images {
  position: relative;
  display: inline-block;
}

.images p {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 0;
  left: 0;
}
<div class="images">
   <img src="https://placehold.it/350x150">
   <p>Some text to appear</p>
</div>

Upvotes: 2

Related Questions