💬Верстка сайтов HTML/CSS/JS/PHP👤Карим@karimME023💬6 ответов📅 22 декабря 2025 г. в 12:52

Всем привет подскажите, пожалуйста, как можно реализовать такой функционал похоже на Spotlight...

Всем привет подскажите, пожалуйста, как можно реализовать такой функционал похоже на Spotlight Effect, но тут блюр, а как им управлять так же не пойму, да и скорее всего никак
Реклама
📢

Дигитал трафик

Канал о digital-маркетинге, трафике и росте бизнеса

@trafficisobar

Ответы6

V
Vladislav 🍏@WD_Vladislav00
22 дек., 13:11
Не помню, работает ли backdrop-filter на svg, но по идеи должен. Делаешь фигуру (японский флаг с вырезом по центру), и ему прозрачный fill и backdrop-filter blur, а центр фигуры привязываешь к мышке, ЕСЛИ она внутри этого блока
C
ChatKeeperBot@ChatKeeperBot0Автору
22 дек., 13:26
Vladislav 🍏, Карим поднял тебе репутацию! Теперь она 53
К
Карим@karimME0230
22 дек., 13:26
кстати, да, отличное решение, спасибо только вот границы блюра очень четкие получаются
V
Vladislav 🍏@WD_Vladislav0
22 дек., 13:28
Тут надо на всю секцию блюр, и либо при наведении делать блюр (кроме выреза), либо делать картинку лица на другом слое
К
Карим@karimME0230
22 дек., 13:30
на всю секцию, в смысле, прям на весь блок с картинкой? а это как?
V
Vladislav 🍏@WD_Vladislav0
22 дек., 13:34
Рядом с блоком кнопки и текстом абсолют блок на всю секцию, потом z-индексом между ними впихиваешь, а уже внутри - эта фигура с блюром. Да, фигура там будет огромная, а вырез маленький. И при наведении на эту секцию блюр активируешь. Ну или тут подробнее с дизайнером пообщаться надо, как он это видит вообще