CSS实现图片画廊单图hover水平缩放，其余图片收窄

可以通过 Flexbox + CSS过渡动画 实现你要的效果，核心思路是利用flex布局的弹性分配特性，结合:hover伪类控制元素的flex占比，同时添加平滑过渡。

完整代码示例 #

HTML结构 #

<div class="stone-gallery">
  <div class="gallery-item">
    <img src="你的石材图片地址1" alt="石材1">
  </div>
  <div class="gallery-item">
    <img src="你的石材图片地址2" alt="石材2">
  </div>
  <div class="gallery-item">
    <img src="你的石材图片地址3" alt="石材3">
  </div>
  <div class="gallery-item">
    <img src="你的石材图片地址4" alt="石材4">
  </div>
</div>

CSS样式 #

/* 画廊容器：横向排列，溢出隐藏 */
.stone-gallery {
  display: flex;
  width: 100%;
  height: 400px; /* 可根据需求调整高度 */
  overflow: hidden;
}

/* 图片项：默认平分宽度，添加过渡动画 */
.gallery-item {
  flex: 1;
  transition: flex 0.5s ease;
}

/* 图片：铺满容器，保持比例不变形 */
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 悬停时：当前图片项占比放大，其余缩小 */
.stone-gallery:hover .gallery-item {
  flex: 0.8;
}

.stone-gallery .gallery-item:hover {
  flex: 2;
}

效果说明 #

• 初始状态：所有图片平分画廊宽度，和你提供的初始效果一致
• 悬停状态：鼠标放到任意一张图片上时，该图片宽度占比放大（flex:2），其余图片宽度占比缩小（flex:0.8），过渡动画让变化更平滑
• 可根据需求调整flex的数值、transition的时长和动画曲线，以及画廊的高度

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