将div高度设置为具有位置的内部div：与CSS3过渡结合使用的绝对值

Question

我用CSS3创建了一些图块。 在每个tile div中，都有一个图像和一些文本。 将鼠标悬停在图像上时将显示文本。

可以在此CodePen中看到这些图块 。

但是，您可以看到，图块会自动采用图块文本的高度，但是我希望它们调整为图像的高度。 我知道您可以通过以下方式设置位置：相对而不是绝对，但是悬停将不再起作用。

有谁知道如何解决这一问题？ 我真的迷路了，不胜感激！

PS不幸的是，我不允许对此项目使用Javascript或JQuery。

Answer 1

您有正确的想法，只是使某些代码过于复杂，这导致了冲突。 这是您的CodePen的新版本，它有了更多的简化。 http://codepen.io/anon/pen/mAirH

希望能有所帮助。

Answer 2

如果消除了overflow: hidden; 从#tile-container .tile获得正确的高度。 但是，您将必须调整宽度以弥补溢流的消除。

更新：如果添加

*{
-webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

那么宽度也很好。

这是更新的笔： http : //codepen.io/anon/pen/iAubK