Javascript 模糊图像并在图像上显示文本（css）

我有两张图片，当我把鼠标悬停在上面时，我想在上面模糊显示文字。然而，目前看来，当光标位于其边缘时，图像仅模糊，而光标位于中间时则不模糊。我希望图像模糊并显示其文本。有没有人对我的错误有什么建议

此外，任何关于如何在图像中更好地定位文本的建议都将非常有用。我想我的“位置”或“显示”已关闭。谢谢大家!

.学习图标{
宽度：300px；
左侧填充：25px；
右边填充：25px；
光标：指针；
/*边框：2件纯蓝*/
}
.研究图标：悬停{
-webkit过滤器：模糊（10px）；
过滤器：模糊（10px）；
}
.研究包装{
显示：内联块；
文本对齐：居中；
垫底：0px；
}
.img___包装{
位置：相对位置；
高度：255px；
宽度：300px；
}
.img\u描述\u层{
位置：绝对位置；
排名：0；
底部：0；
左:10 ;；
右：0；
/*背景：rgba（36,62,206,0.6）*/
颜色：黑色；
可见性：隐藏；
不透明度：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
/*过渡效应。没有必要*/
转换：不透明度.2s，可见性.2s；
}
.img\u包裹：悬停.img\u描述\u层{
能见度：可见；
不透明度：1；
}
.img__说明{
过渡：.2s；
变换：translateY（1em）；
}
.img\u wrap:hover.img\u说明{
变换：translateY（0）；
}
关于image1的示例文本
关于image2的示例文本

若要解决此问题，请将悬停指定在img\uu包装上

为了确保文本居中，必须将.ing\uuu环绕定位为相对，然后将.img\uuu描述层设置为如下所示：

Position:absolute;
Top:50%;
Left:50%;
Transform:translate(-50%,-50%);

---

非常感谢！这比以前效果更好，但是当我将鼠标悬停在文本本身所在的区域时，模糊效果就会消失。你对此有什么建议吗？你需要这样做。学习图标：悬停img{-webkit filter:blur（10px）；filter:blur（10px）；}