mask-filter-CSS

by redky

HTML

<img src="http://www.sogou.com/images/logo_l.gif" alt="">
<div class="filter">
    <img src="http://www.sogou.com/images/logo_l.gif" alt="" />
</div>
<div class="mask">
     <img src="http://www.sogou.com/images/logo_l.gif" alt="">
</div>

CSS

.filter {
    -webkit-filter: blur(5px);
}

.mask {
    height: 100px;
    -webkit-mask-image: -webkit-linear-gradient(right, rgba(1, 1, 1, 0.1) 50%, rgba(0, 0, 0, 0.1) );
    -webkit-mask-origin: border-box;
    -webkit-mask-attachment: 'fixed';
    -webkit-mask-clip: padding-box;
    -webkit-mask-position: 10px 10px;
    -webkit-mask-repeat: no-repeat;
}