JSFiddle - React, Tailwind, and code Playground

HTML

<div class="logo"></div>

CSS

.logo {
    width: 300px;
    height: 100px;
    background: url('http://placehold.it/300x100/ffffff/000000.png&text=first') no-repeat center top;
}

JavaScript

$('.logo').hover(

function () {
    $(this).animate({
        opacity: 0
    }, 'fast', function () {
        $(this)
            .css({
            'background-image': 'url(http://placehold.it/300x100/ffffff/000000.png&text=second)'
        })
            .animate({
            opacity: 1
        });
    });
},

function () {
     $(this).animate({
        opacity: 0
    }, 'fast', function () {
        $(this)
            .css({
            'background-image': 'url(http://placehold.it/300x100/ffffff/000000.png&text=first)'
        })
            .animate({
            opacity: 1
        });
    });
});