CSS FigCaption not operating properly

Question

I'm working on a site and I ran into an issue with a hover figcaption. For some reason, the figcaption hovers just a little bit below the actual image. It only seems to happen when using a percentage size for the image instead of actual pixels, but I need to use the percentages in order to make it work on mobile as well.

I'll have a few snipped of code, does anyone have some suggestions?
The Caption: http://prntscr.com/h6p7r3
HTML: http://prntscr.com/h6p8wn
CSS Image: http://prntscr.com/h6p94y
CSS Caption: http://prntscr.com/h6p97z

Answer 1

Add 'vertical-align:bottom;' to <img> css rules:

figure img {
vertical-align:bottom;
}

Default value is 'baseline' (of text)... causing this little gap ;)

Answer 2

Images are not a way to share code: firstly extract of code is rarely enough to fix bug, secondary, testing it it totally impossible (without retyping it, with the risk of introducing new bugs, not getting same behaviour, in addition to be time lose ^^)... Would you like to help us to help you by sharing your code in playground?

Answer 3

Thank you so much! I'm not surprised it was something so simple. I am confused why it worked fine in the Playground, but that's just one of those weird HTML things. But thank you again! If everyone is as helpful as you I will make sure to keep visiting these forums!

Answer 4

Hi! Absolutely, Sorry it's my first time posting here so I'm still learning the proper etiquette!

Playground: https://code.sololearn.com/WA039D8ZS7II/#html

It actually DOES function properly in the playground, but when the exact code is used in Chrome or Firefox there is still a gap under the image Which boggles my mind even more. I used the green border to show the gap..... Which can be seen here.

Playground: http://prntscr.com/h6r15n
Same code in Chrome: http://prntscr.com/h6r17o