html - CSS/HTML - Twitter Bootstrap - 响应式媒体网格悬停覆盖

Question

因此，我正在使用 Twitter Bootstrap 创建响应式缩略图网格。悬停缩略图时，我希望显示图像标题和图标。
目前，此代码按预期工作:

HTML

<div class="container">
  <ul class="thumbnails">
    <!-- List start -->
    <li class="span3">
      <div class="thumbnail">
        <a href="#">
           <!-- Image -->
          <img src="http://www.placehold.it/300x200" />
          <p>
            <!-- Hover content -->
            <img src="http://i.computer-bild.de/imgs/4/3/2/6/8/2/2/Icon-Google-Drive-48x48-ddb8b51ac50e8859.png" /><br />
            <span>Mojo Babble</span>
          </p>
        </a>
      </div>
    </li>

  </ul>
</div>

CSS

.thumbnails li {
    position: relative;
    overflow: hidden;
}

.thumbnail a p {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,0,0,.4);
  text-align: center;
  opacity: 0;
}

.thumbnail a:hover p {
  opacity: 1;
}

fiddle : http://jsfiddle.net/PgqGg/

唯一的问题是定位。在考虑两件事时，我希望图标和文本稍微垂直居中:

• 标题必须始终可见，至少在某种程度上如此。我不想仅仅因为它有两行那么长就把它剪掉。
• 网格必须具有响应性，因此我认为必须使用百分比值。我知道对于触摸设备，没有 :hover 这样的东西，它会使用媒体查询来处理。

我已经尝试了几个小时来想出一个好的解决方案，但我并没有真正成功。在某些时候它总是变得困惑，这就是为什么我现在请求你的帮助。

您将如何处理这种情况？也许为图标使用图标字体，这样我就可以像文本一样缩放？

Answer 1

可以将图标作为背景图像，并适当定位标题。

.thumbnail a:hover p {
  opacity: 1;
  background-image: url('http://i.computer-bild.de/imgs/4/3/2/6/8/2/2/Icon-Google-Drive-48x48-ddb8b51ac50e8859.png');
  background-position: center center;
  background-repeat: no-repeat;
}

.thumbnail a:hover p span 
{
  position: absolute;
  top: 60%;
  margin-left: -40px;
  margin-top: 10px;
}

演示:http://jsfiddle.net/PgqGg/1/