JSFiddle - React, Tailwind, and code Playground

by easwee

HTML

<div class="image mask">
    <img src="http://orangoo.com/labs/greybox/static_files/night_valley.jpg" />
</div>
<br />
<div class="image mask2">
    <img src="http://orangoo.com/labs/greybox/static_files/night_valley.jpg" />
</div>

CSS

.image {width:200px;height:200px;}
.mask {
    border:1px solid green;
    -webkit-mask-image: url('http://easwee.net/css/img/mask.gif');
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:0 0;
}
.mask2 {
    border:1px solid green;
    -webkit-mask-image: url('http://easwee.net/css/img/mask.gif');
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:0 -200px;
}