HTML中卡片背景悬停消失过渡效果无法正常实现

需求：卡片默认显示背景图，鼠标悬停时背景图消失，同时保留原有文字、按钮的hover动画效果。之前直接用CSS给卡片设置背景图+opacity的方法无法实现，因为会连带影响内部元素的透明度。

当前效果 #

预期效果 #

解决方案 #

核心是用伪元素单独承载背景图，让背景层和内容层分离，这样hover时只控制背景层的显示/隐藏，不会干扰内容元素。

修改后的完整CSS代码

.mil-service-card-sm {
  position: relative;
  display: block;
  padding: 30px 30px;
  z-index: 1; /* 确保内容在背景上方 */
}

/* 新增背景伪元素，单独承载背景图 */
.mil-service-card-sm::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('替换为你的实际背景图地址'); /* 这里替换成你的背景图URL */
  background-size: cover;
  background-position: center;
  opacity: 1;
  transition: opacity 0.4s cubic-bezier(0, 0, 0.3642, 1);
  z-index: -1; /* 把背景层放在内容下方 */
}

/* hover时隐藏背景 */
.mil-service-card-sm:hover::after {
  opacity: 0;
}

/* 以下为原有CSS代码，保持不变 */
.mil-service-card-sm p {
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  -webkit-transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
  transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-service-card-sm .mil-button {
  -webkit-transform: scale(0.3);
          transform: scale(0.3);
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  opacity: 0.4;
}
.mil-service-card-sm:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 0;
  background-color: rgb(255, 152, 0);
  -webkit-transition: 0.6s cubic-bezier(0, 0, 0.3642, 1);
  transition: 0.6s cubic-bezier(0, 0, 0.3642, 1);
  z-index: 2; /* 确保顶部进度条在内容上方 */
}
.mil-service-card-sm:hover p {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.mil-service-card-sm:hover .mil-button {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
  opacity: 1;
}
.mil-service-card-sm:hover:before {
  width: 100%;
}
@media screen and (max-width: 992px) {
  .mil-service-card-sm p {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .mil-service-card-sm .mil-button {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: grayscale(0);
            filter: grayscale(0);
    opacity: 1;
  }
}

.mil-services-grid {
  border-top: solid 1px rgba(255, 255, 255, 0.1);
}
.mil-services-grid .mil-services-grid-item {
  border-right: solid 1px rgba(255, 255, 255, 0.1);
}
.mil-services-grid .mil-services-grid-item:first-child {
  border-left: solid 1px rgba(255, 255, 255, 0.1);
}
@media screen and (max-width: 992px) {
  .mil-services-grid {
    padding-bottom: 90px;
  }
  .mil-services-grid .mil-services-grid-item {
    border-bottom: solid 1px rgba(255, 255, 255, 0.1);
  }
  .mil-services-grid .mil-services-grid-item:nth-child(3) {
    border-left: solid 1px rgba(255, 255, 255, 0.1);
  }
}
@media screen and (max-width: 768px) {
  .mil-services-grid {
    padding-bottom: 90px;
  }
  .mil-services-grid .mil-services-grid-item {
    border-left: solid 1px rgba(255, 255, 255, 0.1);
    border-bottom: solid 1px rgba(255, 255, 255, 0.1);
  }
}

关键说明

• 用::after伪元素单独创建背景层，和内容层完全分离，避免了直接给卡片设置opacity导致内容一起变透明的问题。
• 通过z-index控制层级，确保背景层在内容下方，顶部的橙色进度条在内容上方。
• 给伪元素添加过渡动画，让背景消失的效果和原有文字、按钮的动画节奏保持一致。

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