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

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

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

https://vk.com/video-219751701_456239454

VK Видео | YouTube | Rutube

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

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

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

2. Задайте блоку размеры:
   • Ширина — 100%
   • Высота — 100%

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

• Позиционирование — Абсолютное (Absolute)
• Отступ сверху — 0px
• Установите Z-индекс, например 5, чтобы слой находился поверх контента.

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

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

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

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

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

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

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

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

1. Выделите слой overlay-blur.
2. Перейдите в раздел Анимации и выберите тип При наведении.

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

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

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

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

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

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

2. Настройки слоя overlay-dark почти такие же, как у overlay-blur:
   • Ширина и высота — 100%
   • Позиционирование — Абсолютное
   • Отступ сверху — 0px
   • Z-индекс побольше, например 10
   • События указателя — Нет
   • Вместо размытия — Черный фон с прозрачностью 80%

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

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

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

• Анимация — При наведении
• Триггером выберите не карточку, а весь блок списка (Block List)

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

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

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

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

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

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

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

4. Настройте эффект:
   • Непрозрачность — от 100% до 20%
   • Длительность — 0.5 секунды

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

Резюме

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

1. Создайте слой оверлея (overlay-blur или overlay-dark) — задайте ему абсолютное позиционирование, размеры 100% по ширине и высоте, и настройте Z-индекс.
2. Настройте визуальный эффект:
   • Для размытия — примените фоновый фильтр Размытие
   • Для затемнения — залейте слой полупрозрачным черным цветом (около 80%)
3. Включите параметр События указателя — Нет, чтобы оверлей не блокировал взаимодействие с элементами под ним.
4. Скорректируйте Z-индексы:
   • Слой оверлея должен быть выше основного контента
   • Карточка, на которую наводите курсор, — еще выше, чтобы оставаться в фокусе
5. Добавьте анимацию:
   • Тип — При наведении
   • Триггер — карточка (для одной карточки) или Block List (для нескольких карточек)
   • Эффект — Непрозрачность с длительностью 0.5 секунд
6. Для нескольких карточек настройте анимацию отдельно для каждой — так каждая карточка будет затемнять только окружение, а не весь список.