<figure>
<figure>
<img src="http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/fresh-fish-mackerel-100326612.jpg" alt="" />
<figcaption>smelly fish</figcaption>
</figure>
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 }