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

Question

[Владимир]

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

Вот пример того, что должно получиться:

Answer 1

[Nikita-Fast]

По идее мы и должны размывать изображение и его располагать выше контента и при наведении сдвигать вверх или куда угодно
Или применять заранее размытое изображение или svg
В css это делает filter:blur(); но он наследуется и потому как правило применяют абсолютное позиционирование двух блоков

Это пример : codepen

Answer 2

[Дмитрий]

Пример

Answer 3

[Олег]

blur filter
https://webref.ru/css/value/blur

Answer 4

[siarheisiarhei]

комбинируй добавь, что то вроде такого
background-color: rgba(255,255,255,0.80);
что у тебя = name::before или ....

Comments

[Владимир]

Это просто прозрачность, а на макете именно размытие по Гаусу

[siarheisiarhei]

уууууу.... снова темный лес.... там - ну, куча вариантов...

Answer 5

[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