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/

唯一の問題はポジショニングです。次の2つのことを考慮しながら、アイコンとテキストを垂直方向の中央に配置する必要があります。

  • タイトルは、少なくともある程度は常に表示されている必要があります。2行の長さだからといって切りたくないだけです。
  • グリッドはレスポンシブである必要があるため、パーセンテージ値を使用する必要があると思います。: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 に答える