JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input id="uploader1" type="file" accept="image/*" style="display:none;" required>
    <label for="uploader1">
         <div class="square" id="myImg1"></div>
    </label>
</form>

CSS

.square{
        position: relative;
        width: 50%;
        margin-bottom:8.33333333%;
        cursor: pointer;
    }
.square:before{
        padding-top: 95%;
        display:block;
        content: "";
    }

#myImg1 {
     background: url('http://41.media.tumblr.com/9a0887e02276397170e196758c9137b6/tumblr_nymyp5VQQE1tgso5po1_500.jpg') no-repeat center;
     background-size: cover;
}
#myImg1:hover {
    background:url('http://40.media.tumblr.com/fd646a1997d6163b282711fbdc403932/tumblr_nymyp5VQQE1tgso5po3_500.jpg') no-repeat center;
    background-size: cover;
}
#myImg1:active {
    background:url('http://40.media.tumblr.com/174384c40aa7f329ad6dd2c8590f873b/tumblr_nymyp5VQQE1tgso5po2_500.jpg') no-repeat center;
    background-size: cover;
}

#uploader1 > input {
     display:none;
 }

JavaScript

$("#uploader1").change(function(){
    $("#myImg1").css("background-image", "url("+URL.createObjectURL($(this)[0].files[0])+")");
});