<img class="image__img" src="https://cdn.pixabay.com
然后在其内部给要渲染的图像设置类名image__img; 同级还有一个类名为image__overlay的div,是用于鼠标悬停时显示的,在这里面,我们可以把任何文本相关的东西覆盖在原图之上
编写CSS|创建<em>实</em>际效果
overlay{
opacity: 0;
}
// on hover
.image__overlay:hover {
opacity: 1;
}
就是这么简单,我们已经完成了图像悬停文本<em>叠</em><em>加</em>效果
我们只需要将以下简单的类添<em>加</em>到 css 中,然后将他们添<em>加</em>到类名为 image__overlay 的 div 元素中即可
.image__overlay--blur {
backdrop-filter