JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "test">
</div>

CSS

#test {
   position: relative;
}
#test:after {
    content:"";
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .40) 0%, rgba(255, 255, 255, 0.75) 49%, rgba(255, 255, 255, 1) 80%);
}

img {
  display: block;
}

JavaScript

var divElement = document.getElementById("test");
var newImage = new Image();
var refImage = new Image();

newImage.src = "https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s400/image02.png";
refImage.src = "https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s400/image02.png";
refImage.style.transform = "scaleY(-1)";

divElement.appendChild(newImage);
divElement.appendChild(refImage);