Allerdings funktioniert die Transition nur in ein Richtung. Vielleicht hat ja jemand einen Tip, was ich ändern muss, damit die Transition in beide Richtungen funktioniert.

Wie Chris schon gesagt hat, leg transition nicht auf das :hover.

hier Dein Beispiel ohne div:
http://www.jsr-hersbruck.de/site/subdomains/test/2014_08_14_sturmverliebt_02_bilder_transition.html

  
figure {  
  position: relative;  
  width: 400px;  
  height: 320px;  
  border: 1px solid gainsboro;  
  overflow:hidden;  
}  
	  
figure img {  
}  
  
figcaption {  
  display: block;  
  position: absolute;  
  background:white;  
  width: 400px;  
  height:50px;  
  bottom: 0px;  
  text-align: center;  
  z-index: 5;  
  transition: all 2s;  
}  
  
figure:hover figcaption{  
  bottom:-50px;  
}

Noch schöner wird's mit opacity, die von 1 auf 0 geht.
LG Matthias