Как мне размыть одну сторону изображения, чтобы создать красивый переход от изображения к фону?
Я смог сделать это с помощью этой небольшой хитрости:
.wrapper {
width: 200px;
height: 250px;
overflow: hidden;
}
.image-blurred {
background-image: url('http://lorempixel.com/200/200/city/9');
width: 200px;
height: 200px;
filter: blur(15px);
position: relative;
}
.frontimage {
position: absolute;
top:0px;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
<div class="wrapper">
<div class="image-blurred"></div>
<div class="frontimage"><img src="http://lorempixel.com/200/200/city/9"></div>
</div>
но -webkit-mask-image
не является надежным вариантом.
Есть ли другие способы достичь этого?