如何实现hover卡片时显示描述内容同时将卡片透明度调整为1

第一步：修正HTML规范问题 #

现有代码存在<a>标签嵌套的错误，不符合HTML语法要求，会导致交互异常，先调整结构避免嵌套，调整后示例如下：

<div class="col-md-6">
  <div class="card">
    <!-- 将原外层a标签替换为div，避免嵌套 -->
    <div class="card-wrap">
      <img class="card-img-top img-raised" src="img/banner-1.png" alt="Open Project 1">
      <div class="banner-content">
        Description
      </div>
    </div>
    <a class="mb-2 mt-2 text-center small-xl" href="#">Check More Details</a>
  </div>
</div>

第二步：修改/新增CSS样式 #

• 给卡片内容容器加相对定位，保证悬浮内容基于卡片位置展示
• 给banner-content设置默认隐藏样式，可加过渡效果实现平滑显隐
• 将hover触发逻辑迁移到父级.card容器，避免鼠标移到文字上时效果失效
  完整CSS如下：

.card-img {
  width: 100%;
  border-radius: calc(0.3rem - 0px);
}
/* 新增卡片包裹容器样式 */
.card-wrap {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
}
.card-img-top {
  width: 100%;
  border-radius: 32px;
  opacity: 0.5;
  transition: all 0.3s ease; /* 加过渡效果更丝滑 */
}
/* 新增banner-content默认样式 */
.banner-content {
  position: absolute;
  /* 按需调整定位位置，以下为居中配置 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 20px;
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
/* 如果你需要底部链接也hover才显示，也加相同默认隐藏样式 */
.small-xl {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
/* 父容器hover时触发所有效果 */
.card:hover .card-img-top {
  opacity: 1;
}
.card:hover .banner-content,
.card:hover .small-xl {
  opacity: 1;
  visibility: visible;
}

可选优化 #

如果文字和背景图片对比度不足，可以给card-wrap加hover时的半透明遮罩，在原有CSS基础上新增：

.card-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  z-index: 8;
  opacity: 0;
  transition: all 0.3s ease;
}
.card:hover .card-wrap::before {
  opacity: 1;
}

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