Figcaption inside img

Hey guys, im doing the Tribute Page challenge!
Here’s what i have until now: https://codepen.io/aiden22/pen/qBqmOje
I got stuck at trying to put the figcaption inside the <img> and at the bottom of it.
As you can see, i tried to put the figcaption as absolute positioned and the image as relative but for some reason it wont work. Seems that the position:absolute is ignoring the relative position of the img. Any idea?
ty!

I fixed it, but be aware that if you put html tags inside you text, you have to put them inside backticks so they don’t get interpreted. So, instead of ...inside the <img> and... you need ...inside the `<img>` and ... to get it to show up correctly. Triple backticks can be used on the line before and after code blocks.

Hello @Aiden22

Your position: absolute is being ignored because the caption is not nested within the img. Apply position: relative on the #img-div instead since it is wrapping both the img and figcaption and adjust the value of bottom property on the figcaption accordingly. Take note in codepen, you only have to put the markup which goes inside the body tag inside the HTML section like:

Oh sorry didn’t know. Thank you!

Hey @nibble , so i tried to put position:relative on the #img-div but it will put the caption at the bottom of the div like this:


What i actually want is to put the caption inside the image and to get the 100% of the image’s width, not the whole div.

Ok guys, so i came with a solution:
https://codepen.io/aiden22/pen/qBqmOje?editors=1100
What i just did was to create another div just for the image and the caption, and put this secondary div inside the primary one. After that i just used the position:relative to this second div and position:absolute to the caption.
This was the result:
image
As you can see everything was good! until i found out there was a little space at the bottom of the picture. So here’s the deal: i fixed it putting a display:flex in the secondary div. But i dont know why. I just thought that the space was because the image and caption are display:block, but as far as i know the position:absolute gets the caption out of the flow, so the image should fill the whole secondary div but for some reason it didn’t… Anyone can throw me some light about it? Is it because the secondary container is position:relative and the caption inherits it too so it has both relative and absolute? :sweat_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.