图像鼠标悬停时叠加面板

Question

我正在使用Twitter Bootstrap，我想在鼠标悬停img标签时实现覆盖面板，就像在Stackoverflow中一样，当焦点在用户的图像中时显示细节。

此图片说明：

我是怎么做到这一点的？ 感谢。

Answer 1

无论你想要什么作为“悬停”对象，只需给position: absolute，然后有一个:hover选择器，例如：

<强> HTML

<div>
   <div class="Profile">
       Basic Profile
       <div class="Overlay">
           Put overlay stuff here.
       </div>
   </div>
</div>

<强> CSS

.Profile{
    position: relative;
}
.Overlay{
    position: absolute;
    top: 100%;
    left: 0px;
    opacity: 0;
    height: 0;
}

.Profile:hover .Overlay{
    height: auto;
    opacity: 1;
}

现在，当用户将鼠标悬停在.Profile div上时，其中包含的.Overlay将会出现，然后为过渡添加任何其他样式并使其漂亮。

Example JSFiddle