浮动的缩略图库，悬停时有额外的缩略图内容。 如何使悬停的缩略图与邻居重叠？

Question

I have a gallery of thumbnail images. Below each image, I display the thumbnail title:

<div class='gallery'>
  <div class='thumb'>
    <div class='thumbimage'></div>
    <div class='thumbtitle'></div>
  </div>
  <div class='thumb'>
    <div class='thumbimage'></div>
    <div class='thumbtitle'></div>
  </div>
</div>

The thumbnails float left, in a grid:

.thumb {
  float: left;
}

The thumbtitles are shortened to fit on one line:

.thumbtitle {
  line-height: 1.25em;
  min-height: 1.25em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

When the user hovers over a thumbnail, the abbreviated thumbtitle is replaced with the full thumbtitle:

.thumb:hover .thumbtitle {
  height: auto;
  line-height: 1.25em;
  white-space: normal;
}

If the full thumbtitle does not fit on one line, then the hovered thumbnail box expands downward to accommodate the full title.

Here is my problem:

When the hovered thumbnail expands downward, the thumbnail below shifts right to get out of its way. This is not the behavior I want. I would like the expanded thumbnail to overlap, rather than push away, the thumbnail below. That is, I want the hovered thumbnail box to expand downward without causing any of the other thumbnails to move.

Is this possible?

Answer 1

You could add

.thumbtitle {
    position:absolute;
}

in order to remove them from the flow of the document, and

.thumb {
    position:relative;
}

to position .thumbtitle relatively to .thumb .

This way you can also add

.thumbtitle {
    max-width:100%; /* or width:100% */
}

Finally, add

.thumb:hover .thumbtitle {
    z-index:1;
}

to make it overlap the following elements.

Demo : http://jsfiddle.net/ANvvR/