编写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，是用于鼠标悬停时显示的，在这里面，我们可以把任何文本相关的东西覆盖在原图之上
编写CSS｜创建实际效果
首先我们对 image__img 做一些基本的样式设置
.image__img { display: block; width: 100%; height: 100%; background-size: cover; }
我们再设置父元素的相对定位，以及 image__overlay 的绝对定位属性，然后将 image__overlay 的 top 和 left 设为 0，并将宽高设为 100%，即与父容器重叠。同时设置一下黑色背景色以及透明度，做一个隐约的效果。最后设置一下动画过度效果transition，以及一些想要的字体相关的css属性，这里大家可以自行调整
.image { position: relative; width: 30%; } .image__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); color: #ffffff; font-family: 'Quicksand', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.25s; }
现在是最重要的部分，如果我们鼠标离开，则看不到;鼠标放上去，则能看到。所以设置默认的透明度为 0，hover时，透明度为 1
// at start .image__overlay{ opacity: 0; } // on hover .image__overlay:hover { opacity: 1; }
就是这么简单，我们已经完成了图像悬停文本叠加效果。我们也可以修改这个覆盖效果，有模糊的覆盖，也有纯色的覆盖。我们只需要将以下简单的类添加到 css 中，然后将他们添加到类名为 image__overlay 的 div 元素中即可
.image__overlay--blur { backdrop-filter: blur(5px); } .image__overlay--solid { background: #c51f5d; }
就这么简单。我们用这样的代码创建了三个很酷的 CSS Hover 效果。希望这对你有帮助。
