使用Bootstrap Image Hover效果13后文本padding异常及层级问题咨询

嘿，我之前折腾过这个hover效果，刚好碰到过一模一样的问题！咱们来一步步解决这两个小bug，同时完全保留原效果的动画质感：

你遇到的两个问题其实都是CSS属性配置的小疏漏：

• .image-text 被图片遮挡：默认情况下，图片的渲染层级会高于同级的文本容器，加上原效果里没有明确设置z-index，导致文本被压在下面
• 文本padding失效：因为.image-text用了absolute定位，默认的盒模型会让内边距额外撑开容器，而原代码没设置box-sizing，所以padding看起来没生效

下面是调整后的代码，完美保留原效果13的缩放+模糊动画，同时解决你的两个问题：

HTML结构（和原效果一致，确保嵌套关系正确） #

<div class="image-box">
  <img src="your-image-path.jpg" alt="自定义图片" class="hover-image">
  <div class="image-text">
    <h3>你的标题文本</h3>
    <p>你的描述内容</p>
  </div>
</div>

CSS核心调整 #

/* 容器基础设置，保留原效果的溢出隐藏 */
.image-box {
  position: relative;
  overflow: hidden;
  width: 350px; /* 可自定义 */
  height: 250px; /* 可自定义 */
}

/* 图片样式，保留原动画，新增层级控制 */
.hover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
  /* 给图片设置相对定位和较低层级，让文本能显示在上方 */
  position: relative;
  z-index: 1;
}

/* 原hover动画完整保留：缩放+模糊+透明度变化 */
.image-box:hover .hover-image {
  transform: scale(1.2);
  filter: blur(3px);
  opacity: 0.7;
}

/* 文本容器：修复层级+padding问题 */
.image-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  /* 关键：设置比图片更高的层级，确保不被遮挡 */
  z-index: 2;
  /* 解决padding失效：让内边距包含在容器宽高内 */
  box-sizing: border-box;
  /* 自定义你的padding值，现在会正常生效了 */
  padding: 2.5rem;
  /* 原文本淡入动画保留 */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 文本hover显示效果保留 */
.image-box:hover .image-text {
  opacity: 1;
}

1. 层级修复：给图片加position: relative和z-index: 1，文本容器加z-index: 2，直接把文本拉到图片上方，再也不会被遮挡
2. padding修复：添加box-sizing: border-box是核心，它让padding不会额外撑开容器（绝对定位的容器默认宽高是100%，不加这个的话padding会让内容超出容器范围，看起来就像没生效）
3. 原效果完整保留：所有你喜欢的缩放、模糊、文本淡入动画都没动，只是补了两个关键属性

你可以根据自己的需求随意调整padding数值、容器宽高或者文本样式，效果都能正常工作~

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