🔥 Новая модификация: Система скролл-эффектов!

Динамический 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>
Понравилось решение?