изображения продукта с эффектом "плавного перехода" / наведения, который нежелательно смещает изображения

Question

это сайт WordPress, использующий тему Avada.Таким образом, большая часть функциональности не была написана мной.Я, тем не менее, всегда добавляю собственный CSS для стиля вещей.

, поэтому, если вы посмотрите на страницу, http://new.paramedsupply.com/product-category/blood-collection/, наведите курсор мыши на любой из этих продуктов, и вы увидите малейшее небольшое смещение, так как оно создает эффект "затухания", который показывает другойизображения каждого продукта.Наведите указатель мыши на этот первый продукт для оказания помощи, и вы увидите следующий скачок или смену изображения.

Я надеюсь найти понимание, чтобы понять, откуда это исходит.почти все мои изображения имеют размер 700x700px, поэтому с точки зрения размеров изображений практически нет неровностей.

Я использую Chrome DevTools, и мне было сложно использовать их для поиска исходного кода, чтобы исправить это.

Answer 1

Попробуйте это с Chrome Dev Tool:

1. принудительное наведение на <div class="crossfade-images" style="height: 266px;">
2. игра с непрозрачностью: 0 на втором IMG
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);
}

Ответ Джона верен, и он был первым.Джон побеждает!

Удачи!

Answer 2

Я вижу незначительное смещение изображения во время перехода непрозрачности в Chrome для Windows 10.

Мне удалось исправить это локально, добавив это правило в Chrome Dev Tools, что приводит к переходу на GPU-ускорено:

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