INSET BOX Shadows on images

It is currently not possible to add box shadows to images directly, only to DIVs which are essentially container elements. This meant that I was unable to use pure CSS to add the desired effect to my art gallery images and product previews in the shop. The solution was to dynamically create an overlaying DIV for every image and apply border shadows to it. Here is the code (with Jquery):

HTML:

JAVASCRIPT:

<!--OVERLAY SHADOWS ON SHOP PRODUCT IMAGES -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
   if(document.querySelector('.products-flex-container')){
     var gallery = document.querySelector('.products-flex-container');
	 let images = gallery.querySelectorAll('figure');

for (let element of images) {   
    var overlayshadow = document.createElement("div");
	overlayshadow.id = 'overlayshadow';
	overlayshadow.className = 'overlayshadow'; 
$(overlayshadow).appendTo(element);
}
    } 
    else {
    }
});
</script>


<!--OVERLAY SHADOWS ON MASONRY GALLERY IMAGES-->
<script>
  document.addEventListener('DOMContentLoaded', function() {
   if(document.querySelector('.gallery-masonry-item-wrapper')) {
     var gallery = document.querySelector('.gallery-masonry');
	 let images = gallery.querySelectorAll('figure');

for (let element of images) {   
    var overlayshadow = document.createElement("div");
	overlayshadow.id = 'overlayshadow';
	overlayshadow.className = 'overlayshadow'; 
$(overlayshadow).appendTo(element);
}
    } 
    else {
    }
});
</script>

CSS:

.overlayshadow {
  height: 100%;
  width: 100%;
  display: flex;
  position: absolute;
box-shadow: inset 0px 0px 7px -1px rgba(0,0,0,0.75);
  z-index: 999999;
  top:0;
  bottom:0;
  left:0;
  right:0;
  pointer-events: none;
}
.gallery-lightbox-item .overlayshadow {
  display: none;
}

Notice how the gallery lightbox preview is omitted from having shadows.