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

Posted 2023-05-08

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

【英文标题】：product images with a "crossfade" / hover effect which is undesirably shifting the images

【发布时间】：2018-12-03 00:46:06

【问题描述】：

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

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

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

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

【问题讨论】：

在我的 Chrome 上运行良好。您正在开发哪个版本？如果您添加浏览器信息，可能是其他人 csn 帮助您。它在任何其他浏览器中也有同样的效果吗？

如果它对您有帮助，请检查此***.com/questions/12827135/…

binarymoon.co.uk/2014/02/…

【参考方案1】：

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

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

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

【讨论】：

非常感谢您的帮助！我的投票尚未公开显示，但很快就会公开！

【参考方案2】：

用 Chrome 开发工具试试这个：

强制悬停在<div class="crossfade-images" style="height: 266px;"> 不透明度播放：第二个 IMG 上为 0 添加转换： 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);

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

祝你好运！

【讨论】：

感谢这也很有帮助 - 你向我展示了如何使用 DevTools 来找到它，也许将来会遇到类似的情况。之前，我正在考虑尝试添加边距左或右 1px 以找到罪魁祸首。你们的答案要好得多-并且有效！再次感谢！

不客气@benjamin7767！不过，我不确定为什么我的答案是 -1 分。