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

#javascript #html #css

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

Ответы

Ответ 1

Как вариант(исправлено, используя пример некоего 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\reset.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);
}