Bootstrap 3 - Glyphicon over image

Question

我正在尝试使用bootstrap3制作缩略图。

我怎么能做到这一点，我的意思是在图像上放置这个放大的字形？ （对不起油漆店：D）

实际上，我有这个：

使用以下代码：

<div class="thumbnail PNET-thumbcolor">
 <div class="PNET-cursor-hand center-block text-center">
  <img data-src="holder.js/140x140" alt="Producto">
   <span class="glyphicon glyphicon-zoom-in"></span>
  </div>
  <div class="caption">...
  </div>
</div>

有没有办法只使用CSS制作它，而不触及引导程序样式？

提前致谢！ 请评论或询问您是否需要更多信息和/或改进！ ：）

更新：

JSFIDDLE：http://jsfiddle.net/Leandro1981/AKwb4/1/

Answer 1

我只编辑CSS，添加相对于Lens图标的位置，并将固定宽度设置为容器。

.PNET-cursor-hand
{
    width:140px;
}

.PNET-thumbcolor .glyphicon-zoom-in
{
    position:relative;
    top:-20px;
    right:5px;
    text-align:right;
    display:block;
}

这里是demo