Html 悬停时在整个div上创建遮罩

我一直试图在div内的图像上创建一个遮罩，但是遮罩并没有覆盖div的整个区域（在中间留下空白）。我一直在试图修复它，但找不到解决方案

这是我的进步-

.image容器{
宽度：254px；
高度：280px；
利润率：10px；
浮动：左；
边框：5px实心#fff；
溢出：隐藏；
位置：相对位置；
文本对齐：居中；
盒影：0px 0px 5px#aaa；
游标：默认值；
}
.image container.mask、.image container.content{
宽度：250px；
高度：280px；
位置：绝对位置；
溢出：隐藏；
排名：0；
左：0；
}
.图像容器img{
显示：块；
位置：相对位置；
}
.图像容器a.info{
背景：url（'link.png'）中心不重复；
显示：内联块；
文字装饰：无；
填充：0；
文本缩进：-9999px；
宽度：20px；
高度：20px；
}
.效果.面具{
不透明度：0；
溢出：可见；
边框：100px实心rgba（0,0,0,0.7）；
框大小：边框框；
过渡：所有0.4缓进缓出；
}
.效果a.info{
位置：相对位置；
顶部：-10px；
/*将链接居中*/
不透明度：0；
过渡：不透明度0.5s 0缓进缓出；
}
.效果：悬停.遮罩{
不透明度：1；
边框：100px实心rgba（0,0,0,0.7）；
}
.效果：悬停a.info{
不透明度：1；
过渡延迟：0.3s；
}

---

因为您的边框不是背景，所以从

掩码中删除边框并添加背景

.effect:hover .mask {
   opacity: 1;
   background-color:rgba(0,0,0,0.7);
}

.effect .mask {
   opacity: 0;
   overflow:visible;
   box-sizing:border-box;
   transition: all 0.4s ease-in-out;
}

因为您的边框不是背景，所以从
掩码中删除边框并添加背景

.effect:hover .mask {
   opacity: 1;
   background-color:rgba(0,0,0,0.7);
}

.effect .mask {
   opacity: 0;
   overflow:visible;
   box-sizing:border-box;
   transition: all 0.4s ease-in-out;
}

我删除了此选择器中的边框样式
.effect.mask
，并将边框样式更改为背景样式


.image容器{
宽度：254px；
高度：280px；
利润率：10px；
浮动：左；
边框：5px实心#fff；
溢出：隐藏；
位置：相对位置；
文本对齐：居中；
盒影：0px 0px 5px#aaa；
游标：默认值；
}
.图像容器.掩码，
.图像容器.内容{
宽度：250px；
高度：280px；
位置：绝对位置；
溢出：隐藏；
排名：0；
左：0；
}
.图像容器img{
显示：块；
位置：相对位置；
}
.图像容器a.info{
背景：url（'link.png'）中心不重复；
显示：内联块；
文字装饰：无；
填充：0；
文本缩进：-9999px；
宽度：20px；
高度：20px；
}
.效果.面具{
不透明度：0；
溢出：可见；
框大小：边框框；
过渡：所有0.4缓进缓出；
}
.效果a.info{
位置：相对位置；
顶部：-10px；
/*将链接居中*/
不透明度：0；
过渡：不透明度0.5s 0缓进缓出；
}
.效果：悬停.遮罩{
不透明度：1；
}
.效果：悬停a.info{
不透明度：1；
过渡延迟：0.3s；
}
.效果.面具{
不透明度：0；
溢出：可见；
框大小：边框框；
过渡：所有0.4缓进缓出；
}
.效果：悬停.遮罩{
不透明度：1；
背景：rgba（0,0,0,0.7）；
}
我删除了此选择器中的边框样式
.effect.mask
，并将边框样式更改为背景样式


.image容器{
宽度：254px；
高度：280px；
利润率：10px；
浮动：左；
边框：5px实心#fff；
溢出：隐藏；
位置：相对位置；
文本对齐：居中；
盒影：0px 0px 5px#aaa；
游标：默认值；
}
.图像容器.掩码，
.图像容器.内容{
宽度：250px；
高度：280px；
位置：绝对位置；
溢出：隐藏；
排名：0；
左：0；
}
.图像容器img{
显示：块；
位置：相对位置；
}
.图像容器a.info{
背景：url（'link.png'）中心不重复；
显示：内联块；
文字装饰：无；
填充：0；
文本缩进：-9999px；
宽度：20px；
高度：20px；
}
.效果.面具{
不透明度：0；
溢出：可见；
框大小：边框框；
过渡：所有0.4缓进缓出；
}
.效果a.info{
位置：相对位置；
顶部：-10px；
/*将链接居中*/
不透明度：0；
过渡：不透明度0.5s 0缓进缓出；
}
.效果：悬停.遮罩{
不透明度：1；
}
.效果：悬停a.info{
不透明度：1；
过渡延迟：0.3s；
}
.效果.面具{
不透明度：0；
溢出：可见；
框大小：边框框；
过渡：所有0.4缓进缓出；
}
.效果：悬停.遮罩{
不透明度：1；
背景：rgba（0,0,0,0.7）；
}