Html 在浮动元素下方显示绝对div

我正在一个网站上工作——我的作品集。在主页上，我有一个网格的图像；每个图像都是指向该项目页面的链接

我现在的问题是鼠标悬停描述文本。当用户将鼠标悬停在图像上方时，我希望在图像下方显示一个简短的描述

JSFiddle：

我面临的问题是如何让描述直接显示在图像下方。在原型中，我手动设置

bottom:-50px，但这需要根据不同的文本量进行调整。我希望div的顶部自动与其图像的底部对齐。我看到一些答案说
bottom:0可以工作，但对我来说不行

图像本身是
float:left描述为
位置：绝对；包含它们的div都是
float:left和
位置：相对

我很乐意接受任何建议，以使其发挥作用。
规范来自：

bottom
指定框的底部边距边缘在上方偏移的距离
长方体包含块的底部

top
属性指定绝对定位框的上边距
“边”在长方体包含块的上边缘下方偏移

使用值等于或大于
100%
的
top
属性，而不是
bottom


div.description{
/*其他声明*/
位置：绝对位置；
顶部：110%；/*任何东西>=100%*/
}
我将对您的CSS规则进行以下调整：

div.description {
    color: black;
    background-color: white;
    font-size: small;

    padding: 5px;
    border: 1px solid black;
    border-radius: 0 0 5px 5px;

    position: absolute;
    top: 100%; /* set top to be bottom edge of parent block */
    margin-top: -5px; /* adjust as needed */
    z-index: 1;

    visibility: hidden;

}

指定
顶部
偏移量，以将描述块定位在
父块，然后使用
页边距顶部
控制空白（使用负页边距
是如此需要）

请注意，这与先前发布的解决方案基本相同。
Hmm，也许我应该阅读规范。。。那很容易<代码>顶部：100%
完全符合我的需要。