JSFiddle - React, Tailwind, and code Playground

HTML

<div class="character">
    <img src="http://img194.imageshack.us/img194/3854/goldgladiator.png">
    <div class="green-mask">
        <div class="filler"></div>
    </div>
</div>

CSS

.filler {
    background-color: rgba(160, 255, 97, 0.3);
    position: relative;
    height: 200px;
    margin-top: 200px;
    width: 100%;
}

.green-mask {
    position: absolute;
    width: 508px;
    top: 0;
    -webkit-mask-image: url(http://img194.imageshack.us/img194/3854/goldgladiator.png);
}