JSFiddle - React, Tailwind, and code Playground

by SO_AMK

HTML

<li id="img-home">
    <img id="img-home-src" src="http://dummyimage.com/386x484/000/0011ff&text=Test+Image" style="background-image: url(http://dummyimage.com/386x484/999/000&text=Test+image);" alt="" />
</li>

CSS

li {
    text-align:center;
    cursor:pointer;
}
#img-home {
    border:0;
    width:386px;
    height:484px;
    overflow:hidden;
    display:inline-block;
    padding:0;
    margin:0;
}
#img-home-src {
    padding:0 0 0 0;
    margin:0 0 0 0;
    border:0;
}

JavaScript

$("#img-home").hover(
function() {
    $("#img-home-src").attr("src", "http://dummyimage.com/386x484/999/000&text=Test+image");
}, function() {
    $("#img-home-src").attr("src", "http://dummyimage.com/386x484/000/0011ff&text=Test+Image");
});