为什么CSS中设置的图片过渡效果无法正常生效？

存在的问题 #

• 没有定义img的悬停伪类规则，仅设置了默认状态和过渡属性，浏览器没有悬停时的样式变更目标，自然不会触发过渡效果
• grayscale滤镜的属性值写法不规范，标准写法需要带百分比单位grayscale(100%)或者用0-1的数值grayscale(1)，无单位的写法部分浏览器不识别
• .clients容器中使用了Flexbox专属的align-items、justify-content属性，但未设置display: flex，布局属性不生效
• 缺少上浮效果对应的位移样式规则

修复后的完整CSS代码 #

.clients{
  width:100%;
  height:120px;
  background-color: #f1f1f1;
  /* 新增flex布局声明，让对齐属性生效 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 用gap控制图片间距，避免第一个元素左侧出现多余空白 */
  gap: 100px;
}

.clients img{
  display:inline-block;
  width:100px;
  height:100px;
  padding: 15px 0;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  object-fit: contain;
  /* 修正grayscale单位写法，加webkit前缀兼容老版本浏览器 */
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}

/* 新增悬停状态规则 */
.clients img:hover{
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
  /* 上浮效果，数值越大上浮距离越大 */
  transform: translateY(-8px);
}

修改后即可实现鼠标悬停时图片从灰度转彩色、同时平滑上浮的预期效果。

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