JSFiddle - React, Tailwind, and code Playground

HTML

<div class="my-container">

</div>

CSS

html, body {
    width: 100%;
    height: 100%;
}

.my-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.my-image {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
}

.my-image-shadow {
    box-shadow: inset 0 0 5px 5px red;
}

JavaScript

function createTransparentImage (width, height) {
    var canvas = document.createElement('canvas');

    var ctx = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;

    ctx.fillStyle = 'rgba(0,0,0,0)';    
    ctx.fillRect(0,0,width,height);
    return canvas.toDataURL('image/png','');
}

var imageUrl = 'http://hypnocolor.ru/simon/sample1.jpg';

var myImage = $('<img class="my-image" src="' + imageUrl +'">').appendTo($('.my-container'));

var width = myImage.width();
var height = myImage.height();
var transparentImageSrc =  createTransparentImage(width, height);
$('<img class="my-image my-image-shadow" src="' + transparentImageSrc + '" />').insertAfter(myImage);