JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Uses empty span to overlay color. -->
<div id="overlay">
    <img src="http://lorempixel.com/100/100/food" height="100" width="100" />
    <span></span>
<div>

CSS

div { position: relative; float: left; }
img { display: block; }

#overlay span {
    background-image: linear-gradient(to top, #030303, transparent);
    display: block;
    z-index: 1;
}

#overlay:hover span { opacity: 0.5; }