将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