CSS图片悬停模糊显示文字问题求助

我来帮你搞定这两个问题，咱们先拆解下原因，再给出修复方案：

问题根源分析 #

1. Hover范围受限：你原来把模糊效果绑定在img元素的hover事件上，但文字层img__description_layer默认是绝对定位覆盖在图片上方的——哪怕它是不可见的，也可能干扰鼠标事件传递，导致只有图片边缘（没被完全覆盖的区域）能触发效果。另外，多余的嵌套div（#image1、#image2）也增加了层级混乱的可能。
2. 文字定位异常：img__description_layer里的left:10没有单位（应该是left:0），浏览器会忽略这个无效属性，导致文字层的起始位置不对，影响居中效果。

具体修复步骤 #

1. 扩大Hover触发范围 #

• 把模糊效果的触发条件从img元素的hover，改成容器.img__wrap的hover。这样只要鼠标进入整个容器区域（不管是图片中间还是边缘），都会触发模糊。
• 删掉多余的嵌套div（#image1、#image2），简化DOM结构，避免层级干扰。

2. 优化文字定位 #

• 修正img__description_layer的left属性为left:0，确保文字层完全覆盖图片容器。
• 调整图片的padding设置，避免图片溢出容器，让hover区域和图片显示区域完全匹配。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Image Hover Effect</title>
</head>
<style media="screen">
.study-icons {
  width: 100%; /* 让图片自适应容器宽度 */
  cursor: pointer;
}
/* 当hover整个容器时，图片模糊 */
.img__wrap:hover .study-icons {
  -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;
  padding: 0 25px; /* 将原图片的padding移到容器上 */
  box-sizing: border-box; /* 确保padding不会撑开容器宽度 */
}
.img__description_layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0; /* 修正无效的left值，确保覆盖整个容器 */
  right: 0;
  color: black;
  visibility: hidden;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  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">
  <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 class="img__wrap">
  <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>
</body>
</html>

关键修改点说明 #

• Hover逻辑调整：将.study-icons:hover替换为.img__wrap:hover .study-icons，确保容器内任何位置的hover都能触发图片模糊。
• 图片容器适配：把图片宽度设为100%，让它填充容器；同时将原图片的左右padding移到容器上，并添加box-sizing: border-box，保证容器宽度不会被padding撑开，避免图片溢出。
• 文字层定位修复：把left:10改成left:0，让文字层完全覆盖容器，配合flex布局的align-items: center和justify-content: center，文字就能精准居中在图片上方了。

这样修改后，你测试下——鼠标hover图片任意区域都会触发模糊，文字也会完美显示在图片中间啦！

内容的提问来源于stack exchange，提问作者psychcoder