如何为hover时缩放的图片设置过渡动画速度

问题原因 #

你当前写的.next__card img规则会命中卡片内所有img元素，包括顶部的卡片大图和底部的箭头图标，选择器精度不足容易产生样式冲突，导致大图的缩放过渡没有生效。

解决方法 #

把针对图片的过渡规则绑定到顶部大图专属的next__card-img类上，同时给箭头图标清除多余的继承样式即可，修改后的CSS代码如下：

/* 仅针对顶部卡片大图设置样式 */
.next__card img.next__card-img {
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  /* 这里的0.8s可自行调整，比如改成1.5s就能和箭头的2s过渡效果明显区分开 */
  transition: transform 0.8s ease;
}

/* 清除箭头图标的多余继承样式，避免冲突 */
.next__card--link img {
  border-radius: 0;
  transition: none;
}

你原来写的hover时的缩放规则不需要改动，修改后hover卡片时，顶部大图就会按照你设置的速度平滑缩放。

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