html - 用文本和按钮覆盖图像

Question

我正在网站上制作图像拼贴画，希望每张图像在用户将鼠标悬停在图像上时都能平滑过渡。该叠加层应略微透明并包含文本和按钮。这是我到目前为止的进展:http://classicopia.ivointeractive.com/

每个图像都包裹在一个“产品”div 中，每个产品 div 都应包含一个 img 和一个悬停时出现的“productOverlay”div。现在，书柜是唯一附有覆盖层的元素 - 虽然您看不到它，但这是问题之一

我现在有两个问题:

1. 如何使叠加层可见？目前没有使其不可见的规则，我唯一能做的就是将其定位设置为绝对定位，但这会弄乱其尺寸。

2. 如何让叠加层真正覆盖在图像上？ (现在它被放在它下面)

我已经加载了 jQuery，所以使用它的任何解决方案也都可以。谢谢

Answer 1

父 div 需要是相对的，子 div 需要是绝对的或固定的。然后，您需要将 top: 0; 和 left: 0; 以及 z-index: 1; 添加到 CSS子分区然后使用 jQuery 在悬停时显示和隐藏。