How To Put Figcaption On Top Of An Image

I'm trying to put a figcaption at the bottom of an img so that it is 'on top' of the image and transparent so the the images comes through. Unfortunately, I can't make them the sam

Solution 1:

1. For z-index to work, the elment must have a non-static position, like relative or absolute.

2. Remove the margins from floatImage for width consistency

Result:

.floatImage {
  box-shadow: 0020px0rgba(0, 0, 0, 0.4);
  z-index: -1;
  position: relative;
  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><imgclass="floatImage"src="http://placehold.it/300x400"><figcaption>Placeholder caption</figcaption></figure>

jsFiddle: https://jsfiddle.net/hey1ppd2/