css - Bootstrap 3 - 图像上的 Glyphicon

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，而无需触及 Bootstrap 样式？

提前致谢! 请发表评论或询问您是否需要更多信息和/或改进! :)

更新:

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