How to put figcaption on top of an image
<p>I'm trying to put a <code>figcaption</code> at the bottom of an <code>img</code> so that it is 'on top' of the image and transparent so the the images comes through.</p>

<p>Unfortunately, I can't make them the same width (no idea why) or put the <code>figcaption</code> on top of the the image.  If I use a negative <code>margin-top</code>, it just 'hides' underneath the image.</p>

<p>I've tried <code>z-index</code> and everything else I can think of but no luck so far.
Here is my code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;figure&gt;
  &lt;img class="floatImage" src="img.png"&gt;
  &lt;figcaption&gt;Placeholder caption&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>
</div>
</div>
</p>