如何使用 CSS 在图像悬停上创建带有文本和图标的深色叠加效果？

使用 CSS 在图像上创建叠加效果

在本文中，我们将探讨如何实现文本的深色叠加效果以及使用 CSS 将鼠标悬停在图像上时的图标。

问题：

您的目标是创建一个交互式图像库，其中将鼠标悬停在图像上会显示带有自定义的深色叠加层内容，如所提供的图像所示。挑战在于如何在宽度一致的情况下实现不同高度的图像效果。

解决方案：

为了实现这一点，我们结合使用了 HTML 和 CSS如下：

HTML 标记：

`

<img  src="/static/imghwm/default1.png" data-src="image-url" class="lazy" alt="如何使用 CSS 在图像悬停上创建带有文本和图标的深色叠加效果？" >
<div class="after">This is some content</div>

> ;`

CSS 样式规则：

<code class="css">.image-container {
    position: relative;
    width: <fixed width>;
}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}
.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}</fixed></code>

在此代码中，.image-container 用作图像和覆盖 div 的包装器。 .after 的定位确保覆盖层覆盖整个图像，而条件显示属性使覆盖层仅在悬停时可见。您可以通过修改 .after div 中的背景颜色和内容来自定义叠加层的外观。

自定义：

提供的解决方案作为基本模板，您可以通过添加额外的 CSS 规则来增强其美观性。例如，您可以在叠加层内垂直对齐内容、更改图标样式或包含过渡属性以实现更平滑的悬停动画。

以下是带有额外样式的修改示例：

<code class="css">.image-container .after .content {
    position: absolute;
    bottom: 5px;
    text-align: center;
    width: 100%;
    padding: 5px;
}
.image-container .after .zoom {
    color: #DDD;
    font-size: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -19px;
    height: 50px;
    width: 45px;
    cursor: pointer;
}
.image-container .after .zoom:hover {
    color: #FFF;
}</code>

在此更新的代码中，覆盖内容位于底部并居中对齐。此外，还添加了缩放图标，该图标在悬停时会改变颜色。这些定制展示了所提供解决方案的灵活性，并使您能够创建定制的图像叠加。

以上是如何使用 CSS 在图像悬停上创建带有文本和图标的深色叠加效果？的详细内容。更多信息请关注PHP中文网其他相关文章！