html - 画像を適切なコンテナーに取得できません。画像が積み上げられ、div が乱れていますか?

Question

私はビジュアル デザイナーなので、これはばかげた質問に思えるかもしれません (そして、ある時点で、これは壊れていませんでした!)。マウスオーバーで応答行に画像を表示しようとしています。

誰でも助けることができますか？コードがジャックされていることはわかっています。私はdivの順序に苦労しています。マウスオーバーは機能していますが、画像が積み重なって表示されなくなりました。それらは col-lg-4 コンテナの外にありますが、私はそれを含めました。私は何が欠けていますか？

※画像はFPOです

/// HTML:

      <div class="col-lg-12">
          <div class="highlight">
              <h3>LOREM IMPSUM DOLAR</h3>
              <h5>The fox and the rabbit.</h5>
            </div>
       </div>


    <div class="row">
            <div class="col-lg-4">
                <figure class="cap-left">
                    <div class="thumbnail">
                        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/T_Roosevelt.jpg/473px-T_Roosevelt.jpg" alt="">
                            <figcaptions><h4>Please let this work</h4></figcaptions>
                    </div>
                </figure>
            </div>
         </div>


      <div class="col-lg-4">
                <figure class="cap-left">
                    <div class="thumbnail">
                        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/T_Roosevelt.jpg/473px-T_Roosevelt.jpg" alt="">
                            <figcaptions><h4>Please let this work</h4></figcaptions>
                    </div>
                </figure>
            </div>
         </div>

/// JSFiddle:

http://jsfiddle.net/zvcNa/