JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image">
 <img src="http://coolturalni24.pl/wp-content/uploads/2012/04/grande-caffe-latte-300x225.jpg">
</div>

CSS

.image {

position: relative;
border-radius: 3px;
cursor: pointer;
display: inline-block;
font-size:0;
-webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);

}
.image:before {
content: '';
background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
width: 100%;
height: 50%;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;