Динамический z-index для элементов в Zero Block при наведении

Модификация меняет порядок наложения объектов: элемент «всплывает» над остальными при наведении на него. Выбранный элемент сохраняет верхнюю позицию даже после того, как убрали курсор — до момента выбора следующего объекта. Посмотреть демо →

Как сделать

Подготовь дизайн в zero block

Создай элементы или группы, к которым нужно применить динамический z-index при наведении. Если используешь группы — обязательно установи им тип Object. Для плавного появления добавь элементам step-by-step анимацию при наведении.
Задай всем элементам или группам класс .yu-hover-z-index

Укажи всем нужным объектам один и тот же css-класс, инструкция как добавить. Если вписываешь другой класс, укажи его в генераторе с точкой в начале, как в примере.
Настрой величину z-index в генераторе, например: 100

Не задавай слишком высокое значение без необходимости, чтобы элементы не перекрыли меню, попапы, виджеты и т. д.
Установи код на сайт в блок T123

Скопируй готовый код и вставь его на сайт, памятка по вставке кода.

<!-- romanyu.ru/yu-020 | v1.0.0 | © 2026 Roman Yushin | All rights reserved | romanyu.ru/terms -->
<style>.yu-hover-z-index:hover{z-index:100!important}@supports selector(:has(*)){.yu-hover-z-index{transition:z-index 0s 999999s}.yu-hover-z-index:hover{transition:z-index}.t396__artboard:has(.yu-hover-z-index:hover) .yu-hover-z-index:not(:hover){transition:none}}</style>

Понравилось решение?