Создание эффекта размытия с помощью CSS в содержимом div

#css

Привет всем

Я работаю с дизайном figma и пытаюсь получить эффект размытия в div conteiner, подобный этому:

Я попытался создать этот эффект с помощью следующего правила:

 background-color: rgba(165, 165, 165, 0.3);

Но я получил этот результат:

Если я использую свойство filter blur, я получаю это:

Как я могу применить эффект размытия к изображению за div? но не во всем изображении, а только в части обложки div.

В современных браузерах вы можете использовать backdrop-filter свойство и задать его следующим образом:

 backdrop-filter: blur(5px);

Для совместимости см.: https://caniuse.com/css-backdrop-filter