Home/ Questions/Q 9115501
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T04:26:53+00:00

So I am working with Twitter Bootstrap to create a responsive thumbnail grid. When

  • 0

So I am working with Twitter Bootstrap to create a responsive thumbnail grid. When a thumbnail is hovered, I want the image title and an icon to appear.
At the moment this works as expected with this 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/

The only problem is the positioning. I want the icon & text to be somewhat vertically centered while considering 2 things:

  • The title has to be always visible, at least to some extend. I just don’t want to cut it up only because it’s two lines long.
  • The grid has to be responsive, so percentage values must be used I think. I do know that for touch devices there is no such thing as :hover, that will be dealt with using media queries.

I’ve already tried for some hours now to come up with a good solution, but I wasn’t really successful. At some point it always got messy, thats why I am asking for your help now.

How would you approach such scenario? Maybe use an icon font for the icon so I scales like text?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Could have the icon as a background image instead and position the title appropriately.

    .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;
}

    DEMO: http://jsfiddle.net/PgqGg/1/

    • 0