Как сделать эффект размытия или затемнения фона при наведении на карточку

Иногда хочется добавить на сайт интерактивности — например, чтобы при наведении на карточку фон красиво размывался или затемнялся, а сама карточка оставалась в фокусе. Такой эффект можно сделать в Taptop без единой строки кода , используя слоя оверлея, Z-индекс и анимацию.

Смотрите видео:

Создание эффекта размытия фона при наведении на карточку

Шаг 1: Создайте слой для размытия

Добавьте новый Div-блок и назовите его, например, overlay-blur — присвойте ему класс (Правая панель → Источники стилей) и переименуйте в слоях. Это будет слой размытия.

2. Задайте блоку размеры:

Настройте позиционирование:

Позиционирование — Абсолютное (Absolute)

Отступ сверху — 0px

Установите Z-индекс, например 5, чтобы слой находился поверх контента.

Шаг 2: Настройте размытие

В разделе Фоновые фильтры выберите эффект Размытие (Blur) и отрегулируйте силу размытия по вкусу.

Установите параметр События указателя — Нет (Pointer Events — None), чтобы элементы под слоем оставались кликабельными.

Теперь все размывается, но шапка сайта осталась нетронутой. Чтобы это исправить, нужно настроить Z-индекс.

Шаг 3: Настройте Z-индекс у слоев

Увеличьте Z-индекс у слоя overlay-blur, чтобы шапка оказалась под ним (например, до 10).

У карточки, на которую наводите курсор, поставьте Z-индекс чуть выше, чем у слоя overlay-blur (например, 15), чтобы она была поверх размытия.

Шаг 4: Добавьте оверлею анимацию появления

Выделите слой overlay-blur.

Перейдите в раздел Анимации и выберите тип При наведении.

Выберите триггерный элемент — укажите карточку, на которую будет наведение.

Настройте плавное появление через изменение непрозрачности. Установите длительность 0.5 секунды — оптимально для естественного эффекта.

Создание эффекта затемнения фона при наведении для нескольких карточек

Теперь создадим вариант с затемнением для нескольких карточек сразу.

Шаг 1: Создайте слой для затемнения

Добавьте еще один Div-блок и назовите его, например, overlay-dark.

2. Настройки слоя overlay-dark почти такие же, как у overlay-blur :

3. У списка карточек (Block List) поставьте Z-индекс чуть выше, чем у слоя overlay-dark (например, 15).

Шаг 2: Добавьте оверлею анимацию появления

Настройте анимацию по аналогии с предыдущим примером:

Анимация — При наведении

Триггером выберите не карточку, а весь блок списка (Block List)

Эффект — Непрозрачность, длительность — 0.5 секунды

Эффект затемнения заработал, но сейчас при наведении на любую из карточек подсвечиваются сразу обе карточки. Чтобы это исправить, нужно заставить каждую карточку вести себя независимо.

Шаг 3: Настройте независимое поведение карточек

Нужно настроить анимацию для внутреннего блока каждой карточки отдельно.

Включите у Block List в настройках независимую структуру.

Выберите внутренний Div-блок первой карточки.

Добавьте анимацию при наведении и укажите в качестве триггера айтем второй карточки.

4. Настройте эффект:

Повторите действия для второй карточки.

Резюме

Чтобы сделать эффект размытия или затемнения фона при наведении в Taptop:

Создайте слой оверлея (overlay-blur или overlay-dark) — задайте ему абсолютное позиционирование, размеры 100% по ширине и высоте, и настройте Z-индекс.

2. Настройте визуальный эффект:

Включите параметр События указателя — Нет, чтобы оверлей не блокировал взаимодействие с элементами под ним.

4. Скорректируйте Z-индексы:

5. Добавьте анимацию:

Для нескольких карточек настройте анимацию отдельно для каждой — так каждая карточка будет затемнять только окружение, а не весь список.