CSS实现图片悬停文字叠加效果，你知道多少

}

.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);