My card design features a masonry-style layout similar to what you can see here https://codepen.io/daiaiai/pen/VPXGZx
I'm trying to add some additional information on top of the images using figcaptions, but my attempts with position:relative haven't been successful. I'd prefer not to use negative margins - is there another way to achieve this effect? Any suggestions would be greatly appreciated.
Below is the CSS code from the CodePen example:
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 here's the corresponding 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>
Your assistance and advice are highly valued - thank you!