html - ホバー効果によって壊れたインラインリスト

Question

<ul>ホバーしたときに人の名前と簡単な情報を表示する画像で構成される非常に単純なものがあります。私の意図は<ul>、ホバーアスペクト（）を追加する前の水平にすること<figcaption>です。

私の質問: 1. が<ul>水平ではなくなったのはなぜですか。これを修正するにはどうすればよいですか? <ul>2.どちら<li>が選択されているかに関係なく、ホバー情報を下の中央の同じ場所に表示するにはどうすればよいですか?

CSS Tricks のこの記事を参考にしましたが、私の特定の問題には対応していません。

(可能であれば、これを厳密に HTML/CSS に保つことをお勧めします。)

jsfiddle

ul.stylists {
    margin: 0 auto;
    padding-left: 10px;
    width: 582px;
}

ul.stylists li {
    display: inline;
    padding-right: 20px;
}

ul.stylists li:last-child {
    padding-right: none;
}

figcaption {
   display: none;
   opacity: 0;
    -webkit-transition: opacity 0.3s ease-out;  
    -moz-transition: opacity 0.3s ease-out;  
    -ms-transition: opacity 0.3s ease-out;  
    -o-transition: opacity 0.3s ease-out;  
      transition: opacity 0.3s ease-out;
}

ul.stylists li:hover figcaption {
   display: block;
   opacity: 1;
}