Untitled

<figure>

  <img src="http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/fresh-fish-mackerel-100326612.jpg" alt="" />

  <figcaption>smelly fish</figcaption>

</figure>

figure {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50%);

}

figcaption {

  position: absolute;

  width: 90%;

  bottom: 0;

  left: 0;

  padding: 5px 5%;

  background-color: black;

  color: white;

  text-align: center;

  opacity: 0;

  transition: opacity 1s;

}

figure:hover figcaption,

figure:focus figcaption { opacity: 1 }