Bootstrap5.2：hover模糊card元素时避免子元素text-block被模糊

你当前的问题核心在于父元素的CSS滤镜会被子元素强制继承——当你给.card添加filter: blur时，内部的.text-block也会被模糊，无法单独豁免。要解决这个问题，需要把「需要模糊的内容」和「悬浮文本」拆分为同级元素，让滤镜只作用在前者身上。

修改后的HTML结构 #

拆分原有的嵌套容器，让文本块直接作为.card的子元素，与图片容器平级：

<div class="container"> 
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
    <div class="col">
      <div class="card shadow-sm">
        <!-- 单独的图片容器，仅对它应用模糊 -->
        <div class="card-content">
          <a href="/Zanzibar.html"><img src="./images/mnemba_view.JPG" class="w-100 preview"/></a>
        </div>
        <!-- 文本块直接挂载在card下，不受图片容器的滤镜影响 -->
        <div class="text-block">Click to read more</div>
      </div>
    </div>
  </div>
</div>

调整后的CSS代码 #

.card {
  position: relative;
  display: flex; 
  justify-content: center; 
  align-items: center; 
  overflow: hidden; /* 确保文本块不会超出card范围 */
}

/* 图片容器，仅这个元素应用模糊效果 */
.card-content {
  width: 100%;
  transition: filter 0.3s ease;
}

.preview {
  display: block;
}

.text-block {
  position: absolute;
  opacity: 0;
  z-index: 1;
  /* 精准居中 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  block-size: 50px;
  inline-size: 200px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(189, 113, 20);
  color: white;
  border-radius: 10px;
  transition: opacity 0.5s ease-in-out;
}

/* hover触发逻辑：模糊图片容器 + 显示文本块 */
.card:hover .card-content {
  filter: blur(2px);
}

.card:hover .text-block {
  opacity: 1;
}

.card:hover {
  cursor: pointer; 
}

关键调整说明 #

1. 结构拆分：通过独立的.card-content容器包裹图片，让.text-block与它平级，彻底切断滤镜的继承链路。
2. 滤镜目标转移：将filter: blur从.card转移到.card-content，只作用于需要模糊的图片区域。
3. 居中优化：新增transform: translate(-50%, -50%)，配合top:50%/left:50%实现文本块的精准居中（原写法会导致文本块偏移）。
4. 过渡简化：合并冗余的过渡规则，让动画逻辑更清晰。

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