JSFiddle - React, Tailwind, and code Playground

HTML

<script>
    function backgroundChange(){
    $("#bgDiv").removeClass("background1").addClass("background2");
    };
</script>
<p onclick="backgroundChange()">Click Me</p>
<div id="bgDiv" class="background1"></div>

CSS

#bgDiv {
    width: 250px; 
    height: 250px;
    /* For Safari 3.1 to 6.0 */
    -webkit-transition-property:background-image;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:0s;
    /* Standard syntax */
    transition-property: background-image;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 0s;
}

.background1 {
    background-image: url("http://lorempixel.com/output/abstract-q-c-250-250-5.jpg");
}

.background2 {
    background-image: url("http://lorempixel.com/output/nature-q-c-250-250-7.jpg");
}