我目前正在為一個使用HTML、CSS和JavaScript的WordPress網(wǎng)站開發(fā)一個擴展內(nèi)容卡。我是在不依賴任何CSS框架的情況下開發(fā)的。關(guān)于它的功能和設(shè)計，我有幾個問題:

我如何實現(xiàn)一個特性，其中描述文本(.wdg-description)出現(xiàn)在標題的正下方？ 我想添加一個按鈕，只有當用戶懸停在內(nèi)容卡上時才可見。我怎樣才能實現(xiàn)這一點？ 我注意到當前的設(shè)計與模擬不完全一致。有什么改進設(shè)計的建議或最佳實踐嗎？ 提前感謝您的協(xié)助！

密碼

let userImages = document.querySelectorAll(".user-image");
userImages.forEach(function (e) {
  e.addEventListener("mouseover", function () {
    userImages.forEach(function (e) {
      e.classList.remove("active");
    });
    e.classList.add("active");
  });
  e.addEventListener("mouseout", function () {
    e.classList.remove("active");
  });
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  background-color: #10172b;
}
.image-wrapper {
  display: flex;
  width: 100%;
}
.image-wrapper .user-image img {
  width: 345px;
  transition: all 0.7s ease; /*   will-change: height; */
}
.image-wrapper .user-image.active {
  width: 60%;
}
.image-wrapper .user-image {
  margin-right: 20px;
  padding: 0px;
  height: 450px;
  width: 21%;
  flex-grow: 1;
  overflow: hidden;
  transition: all 0.7s ease;
}
.image-wrapper .user-image:hover {
  width: 60%;
}
.image-wrapper .user-image.active img {
  height: 100%;
}
.wdg-header-text {
  font-family: Poppins, Arial, "sans-serif";
  font-size: 33px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 100px;
  padding-left: 20px;
}
.wdg-image {
  position: relative;
  left: 0px;
  bottom: -20px;
}
.wdg-description {
  width: 345px;
  padding-left: 20px;
  top: 0px;
  position: relative;
  z-index: 50;
  font-family: Poppins, Arial, "sans-serif";
  font-size: 18px;
  color: #fff;
  font-weight: 500;
}
.purple {
  background-color: #6d38f1;
  color: #ffffff;
  font-size: 16px;
  padding: 10px 24px;
  width: 250px;
  float: right;
}

<div class="image-wrapper">
  <div class="user-image" style="background: #293346">
    <div class="wdg-header">
      <p class="wdg-header-text">Services</p>
    </div>
    <div class="wdg-description">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</div>
    <div class="wdg-image"> <img src="https://i.ibb.co/nLqKR5S/services-prix.png" alt="Services" />
    </div>
    <button class="purple">Learn More</button>
  </div>
  <div class="user-image" style="background:#293346">
    <div class="wdg-header">
      <p class="wdg-header-text">Warehouse</p>
    </div>
    <div class="wdg-description">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</div>
    <div class="wdg-image"> <img src="https://i.ibb.co/WvbjHwh/warehouse-prix.png" alt="Warehouse" />
    </div>
    <button class="purple">Learn More</button>
  </div>
  <div class="user-image" style="background:#293346">
    <div class="wdg-header">
      <p class="wdg-header-text">Warehouse</p>
    </div>
    <div class="wdg-description">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</div>
    <div class="wdg-image"> <img src="https://i.ibb.co/k61m60K/iiot-prix.png" alt="Warehouse" />
    </div>
    <button class="purple">Learn More</button>
  </div>
</div>