JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="shortcuts" class="sitewidth">
    <li><a href="#">
                <div class="shortcuticon box">
                    <img src="images/icon-learn.png" alt="" class="a">
                    <img src="images/icon-learn-hover.png" alt="" class="b">
                </div>
            </a>
    </li>
    <li><a href="#">
                <div class="shortcuticon box">
                    <img src="images/icon-learn.png" alt="" class="a">
                    <img src="images/icon-learn-hover.png" alt="" class="b">
                </div>
            </a>
    </li>
    <li><a href="#">
                <div class="shortcuticon box">
                    <img src="images/icon-learn.png" alt="" class="a">
                    <img src="images/icon-learn-hover.png" alt="" class="b">
                </div>
                <h2>Hello World!</h2>
            </a>
    </li>
</ul>

CSS

html, body {
    height: 100%;
}
.container {
    height: auto;
    width:auto;
}
#container1 {
    background-color: gray;
}
p {
    cursor: pointer;
}

JavaScript

$("#shortcuts li").hover(

function () {
    $('img.a', this).stop().animate({
        "opacity": "0"
    }, "slow");
},

function () {
    $('img.a', this).stop().animate({
        "opacity": "1"
    }, "slow");
});