изображения продукта с эффектом «crossfade» / hover, который нежелательно меняет изображения

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

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

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

Я использую chrome DevTools и с трудом пытаюсь найти исходный код, чтобы исправить это.

css,wordpress,image,hover,

1

Ответов: 2


1 принят

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

Я смог исправить это локально, добавив это правило в Chrome Dev Tools, что заставляет ускорить переход на GPU:

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

Попробуйте это с помощью инструмента Chrome Dev:

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

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

Удачи!

CSS, WordPress, образ, парить,
Похожие вопросы