如何制作含图片与文本容器的CSS滑块？文本展开异常求解

原代码的问题在于价格标签未设置初始隐藏状态，且未与图片的hover动作关联，导致标签始终处于展开显示状态。以下是修正后的代码：

修正后的CSS代码 #

.container {
  margin: 40px 0 0 50px;
  width: 90%;
  height: 300px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.iwk {
  position: relative;
  width: 30%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
}

.container img {
  width: 20%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  transition: all ease-in-out 0.5s;
}

.iwk:hover img {
  width: 100%;
}

span {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 2vw;
  color: white;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.iwk:hover span {
  opacity: 1;
}

修正后的HTML代码 #

<div class="container">
  <div class="iwk">
    <img src="https://placehold.co/600x400/orange/white?text=i" alt="Hammer Y">
    <span> Hammer Y <br> £10</span>
  </div>
  <div class="iwk">
    <img src="https://placehold.co/600x400/red/white?text=iw" alt="Drill Z">
    <span> Drill Z <br> £20</span>
  </div>
  <div class="iwk">
    <img src="https://placehold.co/600x400/green/white?text=j" alt="Hphones">
    <span> Hphones <br> £14</span>
  </div>
</div>

关键修改说明 #

• 给.iwk添加position: relative和overflow: hidden，确保图片扩展时不会超出容器，同时作为价格标签的定位父元素
• 价格标签span设置绝对定位，默认通过opacity: 0隐藏，添加过渡效果实现平滑显示
• 将hover事件绑定到.iwk容器，确保鼠标悬停在整个滑块区域时，同时触发图片展开和标签显示的效果
• 调整.container的宽高和间距，优化整体布局

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