JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<div class="thing">
	<div class="test"></div>
	<img src="https://iso.500px.com/wp-content/uploads/2014/07/big-one.jpg" alt="">
</div>

SCSS

.thing {
	width: 600px;
	position: relative;

	img {
		display: block;
		height: auto;
		width: 100%;
	}
}

.test {
	backdrop-filter: blur(8px);
	-webkit-mask-image: -webkit-linear-gradient(rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0));
	-webkit-mask-image: -moz-linear-gradient(rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0));
	-webkit-mask-image: -o-linear-gradient(rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0));
	-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0));;
	height: 200px;
	position: absolute;
	top: 0;
	width: 100%;
}