Figcaption position within card - how to? - html

Question

I use a masonry-look for my cards like that here https://codepen.io/daiaiai/pen/VPXGZx
There I want to add some infos via figcaptions on top of the image/figure. I tried to do that with position:relative but that doesn't work. I wanna avoid using a negative margin-top but I can't think of a different solution. What/How should one do that?
Same as on codepen, but the raw "code" for css:
body {
margin: 0; background: #131212;
}
div#masonry {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vw;
max-height: 800px;
font-size: 0;
}
div#masonry figure {
width: 33.3%;
transition: .8s opacity;
}
figcaption{
position:relative;
top:100px;
left:50px;
}
figure img{
max-width:100%;
}
and that html-code
<div id="masonry">
<figure><figcaption>This girl</figcaption><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg"></figure>
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/2.jpg"></figure>
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg">
</figure>
</div>
Thanks for your help!

Answer 1

The reason you are not seeing the figcaption is because you have set the font-size of #masonry to 0, perhaps to remove spaces between columns.
You need to assign a font-size to figcaption to correct this.
I would also recommend changing how you position it.
Add position: relative to figure, and position: absolute to figcaption.
CODEPEN
SNIPPET:
body {
margin: 0;
background: #131212;
}
div#masonry {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vw;
max-height: 800px;
font-size: 0;
}
div#masonry figure {
width: 33.3%;
transition: .8s opacity;
position: relative;
}
figcaption {
position: absolute;
top: 0;
left: 0;
font-size: 22px;
width: auto;
background: black;
color: white;
}
figure img {
max-width: 100%;
}
/* fallback for earlier versions of Firefox */
#supports not (flex-wrap: wrap) {
div#masonry {
display: block;
}
div#masonry img {
display: inline-block;
vertical-align: top;
}
}
<div id="masonry">
<figure>
<figcaption>This girl</figcaption>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg">
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/2.jpg">
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg">
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg">
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/6.jpg">
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/8.jpg">
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/9.jpg">
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/7.jpg">
</figure>
<figure>
</div>