Use CSS transforms. Unlike absolute positioning, percentages with a transform bases the resulting value off the transformed element's size. So something like this:

  figure figurecaption { 
    transition: all 0.4s;
    transform: translateY(100%);
  }
  figure:hover figurecaption { transform: none; }

Will get you the effect you want.