CSS实现图片悬停文字叠加效果

最新推荐文章于 2024-03-21 02:46:30 发布

neeef_se

最新推荐文章于 2024-03-21 02:46:30 发布

阅读量1.6k

点赞数 5

分类专栏：前端 html 面试文章标签： css css3 html

本文链接：https://blog.csdn.net/neeef_se/article/details/123121040

版权

本文介绍了如何使用CSS和HTML创建一个图像悬停时文本覆盖的效果。通过设置CSS样式，实现当鼠标悬停在图片上时，显示带有文本的覆盖层，提供了一种简单的方法来增强网页交互体验。

摘要由CSDN通过智能技术生成

引言

在这篇文章中，我们将看到如何轻松创建一个漂亮的图像悬停文本覆盖效果。对于本教程，你必须具备充分的 HTML 和 CSS 基本知识。

编写HTML

我们的 html 代码非常简单，只有几行：

<div class="image">
    <img class="image__img" src="https://cdn.pixabay.com/photo/2017/12/15/13/51/polynesia-3021072__340.jpg"
        alt="Bricks">
    <div class="image__overlay">
        <div class="image__title">Ocean</div>
        <p class="image__description">
            Enjoy the blue color of ocean.
        </p>
    </div>
</div>

在顶部有一个img类的div，它是最大的容器。然后在其内部给要渲染的图像设置类名image__img; 同级还有一个类名为image__overlay的div