JSFiddle - React, Tailwind, and code Playground

HTML

<div id="back"></div>

CSS

div#back {
    position: relative;
    width: 250px; height: 250px;
}

#back:before, #back:after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 1;
}

#back:before {
    background-image: url('http://dummy-images.com/abstract/dummy-250x250-Rope.jpg');
    z-index: -1;
    transition: opacity 2s ease;
}

#back:after {
    background-image: url('http://dummy-images.com/abstract/dummy-250x250-Floral.jpg');
    z-index: -2;
}

#back:hover:before {
    opacity: 0;
}