JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circle"><h3>circle:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>
<div class="card"><h3>card:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>
<div class="embossed"><h3>embossed:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>
<div class="soft-embossed"><h3>soft-embossed:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>
<div class="cut-out"><h3>cutout:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>
<div class="morphing-glowing"><h3>morphing-glowing:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>
<div class="glossy"><h3>glossy:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>
<div class="reflection"><h3>reflection:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>
<div class="glossy-reflection"><h3>glossy-reflection:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>
<div class="tape"><h3>tape:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>
<div class="morphing-tinting"><h3>morphing-tinting:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>
<div class="feather"><h3>feather:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>

CSS

body {
    width:480px;
    margin:0 auto;
}
div {
    text-align:center;
    margin-bottom:20px
}

/************************************************************************************
NORMAL
*************************************************************************************/
.normal img {
    border: solid 5px #000;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.5);
    -moz-box-shadow: inset 0 1px 5px rgba(0,0,0,.5);
    box-shadow: inset 0 1px 5px rgba(0,0,0,.5);
}

/************************************************************************************
CIRCLE
*************************************************************************************/
.circle .image-wrap {
    -webkit-border-radius: 50em;
    -moz-border-radius: 50em;
    border-radius: 50em;
}

/************************************************************************************
PHOTO
*************************************************************************************/
.card .image-wrap {
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
    -moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
    box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

/************************************************************************************
EMBOSSED
*************************************************************************************/
.embossed .image-wrap {
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
    -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0...

JavaScript

function changeImg(e) {
    var img = e.target,
        imageWarp = document.createElement("span");
    imageWarp.className = "image-wrap " + img.className;
    imageWarp.style.cssText = "position:relative; display:inline-block; background:url(" +  img.src 
        + ") no-repeat center center; width:" + img.width + "px; height:" + img.height + "px;"
    img.insertAdjacentElement("beforebegin", imageWarp);
    imageWarp.appendChild(img);
}

document.addEventListener("DOMContentLoaded", function() {
    var imgs = document.querySelectorAll("img"),
    length = imgs.length;
    
    for(var i = 0; i < length; i++) {
        imgs[i].style.opacity = 0;
        imgs[i].onload = changeImg;
    }
}, false);