JSFiddle - React, Tailwind, and code Playground

HTML

<div class="square">
    <div class="one"></div>
    <div class="two"></div>
</div>

CSS

.square,
.one,
.two {
    width: 80px;
    height: 80px;
}

.one, 
.two {
    position: absolute;
    top: 0;
    left: 0;
}

.one {
    background-color: red;
}

.two {
    background-color: green;
    display: none;
}

JavaScript

$('.square').mouseenter(function () {
    var square = $(this);
    square.attr('data-image', 'two');
    square.find('.one').fadeOut('medium');
    square.find('.two').fadeIn('medium');
});