如何实现CSS滑块首图默认放大及hover切换放大效果？

解决思路 #

通过CSS选择器组合和默认激活类，实现「首张图默认放大+hover切换放大状态」的交互，同时保证过渡动画流畅。

修改后的代码 #

HTML 部分

给首张图片添加active类标记默认放大状态：

<div class="container">
  <img class="iwk active" src="images/Phone Accessories/iwalkk.png" alt="">
  <img src="images/Phone Accessories/Iwalk_C-removebg-preview.png" alt="">
  <img src="images/Phone Accessories/jbl head.png" alt="">
</div>

CSS 部分

利用容器hover事件和兄弟选择器，控制不同状态下的图片宽度：

.container {
  margin: 40px 0 0 50px;
  width: 70%;
  height: 50vw;
  display: flex;
  justify-content: center;
  gap: 3%;
}

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

/* 默认放大首张图 */
.container img.active {
  width: 50%;
}

/* hover容器时，非hover、非active的图片保持缩小 */
.container:hover img:not(:hover):not(.active) {
  width: 5%;
}

/* hover任意图片时，当前图片放大 */
.container img:hover {
  width: 50%;
}

/* hover状态下，非hover的默认active图恢复缩小 */
.container:hover img.active:not(:hover) {
  width: 5%;
}

效果说明 #

• 页面加载完成后，首张带active类的图片默认以50%宽度展示，其余图片为5%宽度
• 鼠标hover任意图片时，当前hover的图片立即放大到50%，其他未被hover的图片自动缩小到5%
• 鼠标离开容器后，自动恢复首张图的默认放大状态

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