mask image

by Alexandr Zawgorodniy

HTML

<div class="wrap">
<div class="inner"><img src="https://digitalart.io/storage/artworks/209/Corvo-Attano-Dishonoured-Wallpaper.jpeg" alt=""></div>
</div>

CSS

body{background: #000;}

.wrap{color:#fff;position: relative;
}
.inner{position: absolute;
top: 0;left: 0;right: 0;bottom: 0;z-index: -1; 
}
.inner img{max-width: 100%;
-webkit-mask-image: -webkit-gradient(linear,left top, left bottom,
color-stop(0.00, rgba(0,0,0,1)),
color-stop(0.5, rgba(0,0,0,1)),
color-stop(1.00, rgba(0,0,0,0)));
}