1

所以我正在使用 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;
}

小提琴：http: //jsfiddle.net/PgqGg/

唯一的问题是定位。在考虑两件事时，我希望图标和文本在某种程度上垂直居中：

  • 标题必须始终可见，至少在某种程度上是这样。我只是不想剪掉它，因为它有两行长。
  • 网格必须响应，所以我认为必须使用百分比值。我确实知道，对于触摸设备，没有:hover, 将使用媒体查询来处理。

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

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

4

1 回答 1

2

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

.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/

于 2013-01-11T20:25:31.430 回答