在本文中，我们将介绍 5 种不同类型的叠加层：左、右、上、下和淡入淡出。您将需要两个 div。一个将是您的覆盖层 div，包含用户将鼠标悬停在图像上时将显示的内容，另一个将是包含图像及其覆盖层的容器。代表覆盖层的内部 div 将有两个类。一个用于设置所有叠加的样式，另一个表示特定的叠加类型（左、右、上、下或淡入淡出）。
您的图像应该放置在内部 div（覆盖）之外，但在外部 div（容器）内。不要忘记添加描述图像的替代文本，以帮助依赖屏幕阅读器的用户。
HTML代码：
Image Overlay
GeeksforGeeks
Image Overlay
CSS 代码：设置容器相对于其正常位置的位置并定义其宽度和高度。使叠加层起作用的关键是将其位置设置为绝对位置。这意味着它相对于其最近定位的祖先定位，在这种情况下是图像。为了使覆盖层并不总是存在并且仅在用户将鼠标悬停在图像上时才会显示，将其不透明度设置为零，即完全透明。使用“background-color”来设置叠加的颜色。使用“transition”使叠加层逐渐出现而不是在图像上弹出。由于我们将叠加层的不透明度设置为零，因此一旦我们将鼠标悬停在容器上，我们希望将该不透明度设置为 1。这意味着，一旦用户将鼠标悬停在容器项目上，就会出现叠加层。
Fade Overlay：覆盖层的宽度和高度是图像的宽度和高度等于 od div 图像。将鼠标悬停在图像上后，叠加层会出现在该图像的顶部。
- 程序：
Image Overlay GeeksforGeeks
Image Overlay
- 输出：
左覆盖：覆盖的高度是图像的高度（100%）。宽度为零并设置为左侧。将鼠标悬停在图像上并逐渐从左向右移动后，宽度将设置为 100%。
- 程序：
Image Overlay GeeksforGeeks
Image Overlay
- 输出：
右叠加：叠加的高度是图像的高度（100%）。宽度为零并设置为右侧。将鼠标悬停在图像上并从右向左逐渐移动后，宽度将设置为 100%。
- 程序：
Image Overlay GeeksforGeeks
Image Overlay
- 输出：
顶部叠加：叠加的宽度是图像的宽度 (100%)。高度为零并设置为顶部。将鼠标悬停在图像上并从上到下逐渐移动后，高度将设置为 100%。
- 程序：
Image Overlay GeeksforGeeks
Image Overlay
- 输出：
底部叠加：叠加的宽度是图像的宽度 (100%)。高度为零并设置为底部。将鼠标悬停在图像上并从底部逐渐移动到顶部后，高度将设置为 100%。
- 程序：
Image Overlay GeeksforGeeks
Image Overlay
- 输出：
