JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div class="bottom">text</div>
    <div class="top">text</div>
</div>

CSS

div {
    font-size: 3em;
    height: 250px;
    width: 250px;
    position:absolute;
    left:0;
    transition: opacity 1s ease-in-out;
}
div.bottom {
    background: no-repeat center/100% url('http://dreamatico.com/data_images/kitten/kitten-2.jpg');
    background-size: cover;
}
div.top {
    background: no-repeat center/100% url('http://www.northwestcrossing.com/wp-content/uploads/2015/03/114240651_cat_342943c.jpg');
    background-size: cover;
}
div.top:hover {
    opacity:0;
}