wolf_adventures1909 wolf_adventures1909 - 3 months ago 15
CSS Question

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 same width (no idea why) or put the
figcaption
on top of the the image. If I use a negative
margin-top
, it just 'hides' underneath the image.

I've tried
z-index
and everything else I can think of but no luck so far.
Here is my 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;
}

<figure>
<img class="floatImage" src="img.png">
<figcaption>Placeholder caption</figcaption>
</figure>




Answer
  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: 0 0 20px 0 rgba(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>
  <img class="floatImage" src="http://placehold.it/300x400">
  <figcaption>Placeholder caption</figcaption>
</figure>

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