我正在网站上制作图像拼贴画，并希望每当用户将鼠标悬停在图像上时，每个图像都会平滑过渡。此叠加层应略微透明，并包含文本和按钮。以下是我目前的进展：http://classicopia.ivointeractive.com/
每个图片都包含在一个“product”div中，每个产品div应包含一个img和一个悬浮时出现的“productOverlay”div。现在，书柜是唯一附有叠加层的物品 - 你看不到它，这就是其中一个问题
我现在遇到两个问题：
如何使叠加显示？现在没有任何规则让它变得不可见，我唯一可以看到的就是把它的定位设置为绝对，但这会弄乱它的尺寸。
如何让叠加层实际覆盖图像？ （现在它放在它下面）
我已经加载了jQuery，所以使用它的任何解决方案都可以。感谢
答案 0 :(得分：1)
父div需要是相对的，子div必须是绝对的或固定的。然后，您需要将top: 0;和left: 0;以及z-index: 1;添加到子div的CSS中。然后使用jQuery在悬停时显示和隐藏。
答案 1 :(得分：0)
尝试使用z-index css属性。
答案 2 :(得分：0)
用position: relative包裹div中的每张图片，并将叠加层也放在此div中。
首先，叠加层为display: none。将鼠标悬停在div上，可以为叠加层设置display: block。或jQuery show()和hide()
图片的z-index为0，叠加层为1。