JSFiddle - React, Tailwind, and code Playground

by lukempeters

HTML

<div id="glowing">
    <img src="http://www.lukepeters.me/hosted_images/e.png" alt="" />
    <img src="http://www.lukepeters.me/hosted_images/eOver.png" class="overImg" alt="" />
</div>

CSS

body {
    background: #529fff;
}

div#glowing {
    position: relative;
    width: 400px;
    height: 400px;
    cursor: pointer;
}

div#glowing img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

div#glowing img.overImg {
    z-index: 2 !important;
    display: none;
}

JavaScript

$('#glowing').hover(function() {
    $('.overImg').fadeIn(500);
}, function() {
    $('.overImg').fadeOut(700);
});