フィルムストリップカルーセルにdivを追加する

Question

各猫の写真に画像と小さな説明が含まれているdivを追加します。 divを作成するのは難しい部分ではなく、その特定のイメージにアタッチされているので、イメージが別のイメージに切り替わるとdivも一緒に切り替わります。私はそれがそれぞれの写真に対して敏感で具体的であり、固定された立場に立たないようにしたい。

http://jsfiddle.net/benknowles/TUwqn/2/

<div class="red"> 

<div class="red-content col-md-4" style="background-color: red;"> 
    Content goes here. 

</div> 


</div> 

Answer 1

基本的には、このような画像のキャプションは過去のものと、私は目にもう少し魅力的な何かを行っています。原則は同じです。

メインピクチャは相対的な位置にあり、キャプションは絶対的な位置に配置されます。ペンに

.profiles > li { width:150px; height:200px; float:left; margin-right:50px; } 
.info, .pic { position:absolute; } 

リンク：

http://codepen.io/damianocel/pen/ALmrja