带有“淡入淡出”/悬停效果的产品图像，这会导致图像移位

Question

这是一个使用 Avada 主题的 WordPress 网站。因此，大部分功能都不是我编写的。不过，我总是添加自定义 CSS 来设置样式。

因此，如果您查看页面http://new.paramedsupply.com/product-category/blood-collection/，将鼠标悬停在任何这些产品上，您会看到最轻微的变化，因为它会显示“淡入淡出”效果，即显示每个产品的其他图像。将鼠标悬停在第一个创可贴产品上，您会看到下一个图片跳跃或移动。

我希望找到洞察力来弄清楚这是从哪里来的。几乎我所有的图片都是 700x700px，所以就图片尺寸而言，几乎没有不规则性。

我使用 chrome DevTools，但很难找到源代码来解决这个问题。

Answer 1

在 Windows 10 的 Chrome 中的不透明度过渡期间，我看到图像偏移非常轻微。

我可以通过在 Chrome 开发工具中添加此规则在本地解决此问题，这会强制转换为 GPU 加速：

.product-images .crossfade-images img {
  transform: translateZ(0);
}

Answer 2

用 Chrome 开发工具试试这个：

1. 强制悬停在<div class="crossfade-images" style="height: 266px;">
2. 不透明度播放：第二个 IMG 上为 0
3. 添加转换： translateZ(0) 到.product-images .crossfade-images img

这是你的工作代码：

.product-images .crossfade-images img {
    transition: opacity .5s ease-in-out;
    position: relative;
    z-index: 50;
    min-width: 100%;
    vertical-align: middle;
    transform: translateZ(0);
}

乔恩的回答是正确的，他是第一个。乔恩赢了！

祝你好运！