在本文中，我们将学习如何使用 HTML 和 CSS 创建当鼠标悬停在其上时的图像覆盖标题。这可以通过将图像和标题 div 包含在单个 div(容器)中来完成。标题 div 最初是不可见的。只有当鼠标悬停在图像上时它才可见。
标题 div 相对于容器 div(父级)定位。通过设置“opacity: 0”或“z-index: -1”使其不可见(z-index : -1 表示标题 div 层现在位于容器 div 的后面，因此不可见)。它仅在悬停时通过设置可见 它的“opacity: 1”或“z-index: 0”分别如下例所示。
示例 1：此处，标题 div 的不透明度最初为 0，悬停时更改为 1，过渡时间为 0.6 秒。
Hover over image to see title
GeeksforGeeks
输出：
示例 2：这里，标题 div 的 z-index 最初为 -1，这意味着它位于容器 div 的后面。它在悬停时变为 0，过渡时间为 0.8 秒，如下所示：
Hover over image to see title
GeeksforGeeks
输出：