+

Делаем затемнение соседних карточек при наведении на карточку

Немного магии CSS без использования скриптов и ваша сетка блока, преимуществ либо каталога товаров приобретёт прикольную функцию UI.
Этот эффект позволяет сконцентрировать внимание на просматриваемом контенте, при этом приглушив яркость соседний информации. Копируйте и тестируйте у себя =)

Версия для каталога товаров

Версия актуальна для большинства блоков сетки товаров (при подключении товаров из каталога) ST300, ST305N, ST310N, ST315N, ST320N и др.
Добавьте код в T123 и разместить и опубликуйте страницу.

При необходимости измените значение opacity либо transition
Наслаждайтесь =)

<!-- https://ilda.top/delayem-zatemneniye-kartochek-pri-navedenii -->

<style>
  .js-store-grid-cont:hover .js-product {opacity: .5}
  .js-store-grid-cont:hover .js-product:hover {opacity: 1}
  .js-product {transition: opacity 0.3s ease-in-out}
</style>

Версия для сетки блога (потоков)

    Версия актуальна для всех блоков из категории Новости и потоки — FD101, FD201, FD301, FD302
    Добавьте код в T123 и разместить и опубликуйте страницу.

    При необходимости измените значение opacity либо transition
    Наслаждайтесь =)
    
<!-- https://ilda.top/delayem-zatemneniye-kartochek-pri-navedenii -->

<style>
  .js-feed-container:hover .js-feed-post {opacity: .3}
  .js-feed-container:hover .js-feed-post:hover {opacity: 1}
  .js-feed-post {transition: opacity 0.3s ease-in-out}
</style>
    Made on
    Tilda