Does anyone know how to position a figcaption at the bottom of an img so that it appears on top of the image with a transparent background?
I've been having trouble making them the same width and getting the figcaption to sit on top of the image. When I use a negative margin-top, it just gets hidden under the image.
I've tried using z-index and other techniques, but so far I haven't had any success.
Here's the code I'm working with:
.floatImage {
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4);
margin: 15px;
margin-right: 0px;
z-index: -1;
width: 100%;
}
figure {
width: 25%;
float: right;
}
figcaption {
background-color: rgba(79, 44, 16, 0.6);
height: 1.2em;
width: 100%;
margin-top: -2.4em;
float: right;
text-align: center;
color: white;
z-index: 1;
font-family: 'Open Sans', sans;
}<figure>
<img class="floatImage" src="img.png">
<figcaption>Placeholder caption</figcaption>
</figure>