@probeloff

Как сделать размытие контента?

Друзья, как можно сделать размытие контента при hover? Точнее даже hover это не главное - главное как вообще реализовать размытие контента, а не только изображения?
Уже кучу всего перепробовал, но нужного эффекта нет. Например скрипт StackBlur неплохо справляется со своей задачей, но он может размывать только изображение, а не весь контент.
Может у кого есть примеры, буду очень благодарен!

Вот пример того, что должно получиться:
5bb85024bb6c4915002423.png
  • Вопрос задан
  • 530 просмотров
Пригласить эксперта
Ответы на вопрос 5
Nikita-Fast
@Nikita-Fast
SVGшник и леплю что попало
По идее мы и должны размывать изображение и его располагать выше контента и при наведении сдвигать вверх или куда угодно
Или применять заранее размытое изображение или svg
В css это делает filter:blur(); но он наследуется и потому как правило применяют абсолютное позиционирование двух блоков

Это пример : codepen
Ответ написан
@siarheisiarhei
комбинируй добавь, что то вроде такого
background-color: rgba(255,255,255,0.80);
что у тебя = name::before или ....
Ответ написан
@ksnk
Чтобы "размыть" обычный текстовый контент - есть свойство text-shaddow
.blurry-text {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

https://ruseller.com/lessons.php?rub=2&id=1067
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы