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

引言

在这篇文章中，我们将看到如何轻松创建一个漂亮的图像悬停文本覆盖效果。对于本教程，你必须具备充分的 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