Создание фильтра для карточки посредством html, js, css, svg

Друзья, возник такой вопрос, как реализовать такой blur для карточки? Как переместить в низ карточки вопросов не возникает, а вот как сделать такой blur непонятно, кто-то может помочь в этом вопросе? Реализовать бы посредством js, html, css, svg или любыми другими методами

Ответ

Как вариант(исправлено, используя пример некоего Stas'а https://codepen.io/html_man/pen/oeNvOa):
*,*:after,*:before { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; outline: 0; } /*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css
eset.css*/ .main { position: relative; z-index: -1; height: 300px; width: 400px; border: 2px solid #000; -webkit-border-radius: 10px; border-radius: 10px; background: url(https://www.visitfinland.com/app/uploads/Aland_Islands_fishing-400x300.jpg) no-repeat 50% 50%; overflow: hidden; } .filter-child { position: absolute; left: -10px; right: -10px; bottom: -10px; height: 110px; background: inherit; background-repeat: no-repeat; background-position: bottom; overflow: hidden; } .filter-child::after { content: ''; left: 0; right: 0; bottom: 0px; height: 100%; position: absolute; z-index: 99; background: inherit; -webkit-box-shadow: inset 0 0 0 200px rgba(99, 99, 99, 0.4); box-shadow: inset 0 0 0 200px rgba(99, 99, 99, 0.4); -webkit-filter: blur(5px); filter: blur(5px); }