Javascript 如何在悬停图像上添加带文本的着色遮罩

希望达到上图中的效果。我有一堆svg图标。当用户将鼠标悬停在每个图像上时，图像的色调和白色文本显示为每个图标所特有的

---

这种效果的最佳实践是什么？使图标成为背景图像？现在它们是内联svg。

只需放置

不透明度：0在图像悬停时，如果您可以选择SVG图像，请尝试以下代码：


.col-sm-6{
最小高度：500px；
背景：浅灰色；
文本对齐：居中；
}
.图像包裹{
显示：内联块；
最大宽度：100%；
位置：相对位置；
}
.图像包裹。覆盖{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
颜色：白色；
不透明度：1；
过渡：不透明度。5s缓解；
z指数：0；
}
.图像换行：悬停.覆盖{
不透明度：0；
}
#形象{
位置：绝对位置；
左：0；
排名：0；
}
#正文{
z指数：100；
位置：绝对位置；
颜色：白色；
字体大小：24px；
字体大小：粗体；
左：0；
顶部：70像素；
}
将图像和不可见覆盖层分层
。然后，悬停时，使覆盖可见


.col-sm-6{
最小高度：500px；
背景：浅灰色；
文本对齐：居中；
}
.图像包裹{
显示：内联块；
位置：相对位置；
宽度：300px；
高度：300px；
}
.图像包裹。覆盖{
位置：绝对位置；
排名：0；
左：0；
框大小：边框框；
宽度：100%；
身高：100%；
颜色：白色；
字体：30px无衬线；
字体大小：粗体；
不透明度：0；
过渡：不透明度。5s缓解；
背景色：#5fa1e1；
填充顶部：100px；
边界半径：10px；
}
.图像换行：悬停.覆盖{
不透明度：0.9；
}
.菜单图像{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
边界半径：10px；
}
感谢您的努力，但您的右图像将变成悬停的左图像。我想在左边的图像上添加蓝色的文本，这样它看起来和右边的图像相似。