JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image-container">
    <img class="image-grey" src="http://wallpapernesia.com/wp-content/uploads/2014/12/colorful_wallpaper_45_backgrounds-1024x576.jpg" />
</div>

CSS

.image-container {
    position:relative;
    display:inline-block;
}

.image-grey {
    display:block;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.image-container:after {
    background-image: url("http://wallpapernesia.com/wp-content/uploads/2014/12/colorful_wallpaper_45_backgrounds-1024x576.jpg");
    content: "";
    height: 30%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}