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

最新推荐文章于 2024-08-21 15:04:55 发布

用户昵称23

最新推荐文章于 2024-08-21 15:04:55 发布

阅读量435

点赞数 2

分类专栏：前端 html 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_67402914/article/details/123344497

版权

本文介绍如何使用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