我有两个图像，悬停在上面时，我想模糊并在上面显示文本。然而，目前看来，只有当光标位于其边缘时，图像才会模糊，而当光标位于在中间时，图像不会模糊。我希望图像模糊并显示其文本。有人能告诉我哪里可能出错吗？
此外，任何关于如何在图像中更好地定位文本的建议都将非常好。我认为我的"；位置"；或"；显示"；已关闭。谢谢！
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<style media="screen">
.study-icons {
width: 300px;
padding-left: 25px;
padding-right: 25px;
cursor: pointer;
/* border: 2px solid blue; */
}
.study-icons:hover {
-webkit-filter: blur(10px);
filter: blur(10px);
}
.study-wrapper {
display: inline-block;
text-align: center;
padding-bottom: 0px;
}
.img__wrap {
position: relative;
height: 255px;
width: 300px;
}
.img__description_layer {
position: absolute;
top: 0;
bottom: 0;
left: 10;
right: 0;
/* background: rgba(36, 62, 206, 0.6); */
color: black;
visibility: hidden;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
/* transition effect. not necessary */
transition: opacity .2s, visibility .2s;
}
.img__wrap:hover .img__description_layer {
visibility: visible;
opacity: 1;
}
.img__description {
transition: .2s;
transform: translateY(1em);
}
.img__wrap:hover .img__description {
transform: translateY(0);
}
</style>
<body>
<div class="img__wrap">
<div id="image1">
<img class="img__img study-icons" src="assets/studies/image1.png">
<div class="img__description_layer">
<p class="img__description">Sample text here about image1?</p>
</div>
</div>
</div>
<div class="img__wrap">
<div id="image2">
<img class="img__img study-icons" src="assets/studies/image2.png">
<div class="img__description_layer">
<p class="img__description">Sample text here about image2</p>
</div>
</div>
</div>
</body>
</html>要解决此问题，请将悬停指定在img_wrap上
为了确保文本居中，必须将.ing_wrap定位为相对，然后将.img_description_layer设置为这样：
Position:absolute;
Top:50%;
Left:50%;
Transform:translate(-50%,-50%);