css转换-悬停在元素上时出现问题

下面是我在我的卡组件上的转换片段。我有一个过渡，当它被悬停在框阴影。它在向外悬停时看起来很平滑，但在向内悬停时却不平滑（看起来有点尖锐）

我在css中遗漏了什么

这是我的小提琴-

.wrapper{
显示器：flex；
证明内容：中心；
对齐项目：居中；
字号：1rem；
身高：7.75雷姆；
过渡：所有300毫秒；
盒影：0 2px4p0 rgba（2242242240.5）；
边框：实心1px#f5；
}
.包装器：悬停{
盒影：0 2px14px 0 rgba（0,0,0,0.4）；
过渡：不透明度200ms缓进缓出；
}
.imageContainer{
弹性：0.33%；
身高：100%；
}
.形象{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
.内容{
弹性：1；
文本对齐：左对齐；
保证金：0.1.1825雷姆；
}
.头衔{
字号：1rem；
保证金：0.25雷姆0；
填充：0；
}
.价格{
颜色：#BAA082；
字体大小：0.875rem；
文本转换：大写；
保证金：2Rem0；
填充：0；
}
@介质（最小宽度：46.5雷姆）{
.包装纸{
身高：8.75雷姆；
}
.头衔{
字体大小：1.1875rem；
}
.价格{
字号：1rem；
}
}

销售点
销售点

从165英镑起

从

转换中移除
不透明度
，将得到您想要的结果。检查代码段


.wrapper{
显示器：flex；
证明内容：中心；
对齐项目：居中；
字号：1rem；
身高：7.75雷姆；
过渡：所有300毫秒；
盒影：0 2px4p0 rgba（2242242240.5）；
边框：实心1px#f5；
}
.包装器：悬停{
盒影：0 2px14px 0 rgba（0,0,0,0.4）；
过渡：200ms缓进缓出；
}
.imageContainer{
弹性：0.33%；
身高：100%；
}
.形象{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
.内容{
弹性：1；
文本对齐：左对齐；
保证金：0.1.1825雷姆；
}
.头衔{
字号：1rem；
保证金：0.25雷姆0；
填充：0；
}
.价格{
颜色：#BAA082；
字体大小：0.875rem；
文本转换：大写；
保证金：2Rem0；
填充：0；
}
@介质（最小宽度：46.5雷姆）{
.包装纸{
身高：8.75雷姆；
}
.头衔{
字体大小：1.1875rem；
}
.价格{
字号：1rem；
}
}

销售点
销售点

从165英镑起
请解释您所说的夏普是什么意思。