CSS/HTML - Twitter Bootstrap - responsive media-grid hover-overlay

Also ich arbeite mit Twitter Bootstrap zum erstellen einer responsive thumbnail grid. Wenn ein Miniaturbild schwebte, ich möchte den Titel des Bildes und ein Symbol angezeigt.

Im moment funktioniert dies wie erwartet, mit diesem code:

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/

Das einzige problem ist die Positionierung. Ich möchte das Symbol & text irgendwie vertikal zentriert, während der Prüfung 2 Dinge:

• Die Titel werden immer sichtbar sein, zumindest teilweise. Ich will einfach nicht zu schneiden, nur weil es zwei Zeilen lang.
• Netz zu reagieren, so dass die prozentualen Werte verwendet werden müssen, denke ich. Ich weiß, dass es für touch-Geräte gibt es keine solche Sache wie :hover werden, die sich mit media queries.

Hab ich auch schon versucht nun seit einigen Stunden zu kommen mit einer guten Lösung, aber ich war nicht wirklich erfolgreich. Irgendwann ist es immer chaotisch, deshalb bitte ich um Eure Hilfe.

Wie würden Sie Vorgehen solches Szenario? Vielleicht verwenden Sie eine Symbol-schriftart für die Icons, so dass ich Skalen wie text?