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开发工具尝试此操作：

将鼠标悬停在<div class="crossfade-images" style="height: 266px;">
不透明播放：第二个IMG为0
添加变换：将Z（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);
}

乔恩的答案是正确的，他是第一位。乔恩赢了！

祝你好运！

具有“交叉淡入淡出” /悬停效果的产品图片，会不希望地移动图片

2 个答案: