When hovering over #one, the class .hidden is applied to #first. I have added a script to make .hidden fade out using transition: ease-in 0.3s;, but I am having trouble getting the fade in effect to work. I attempted adding transition: ease-in 0.3s; to #first, but it did not solve the issue.
UPDATE Here is the updated code on Fiddle: https://jsfiddle.net/Lbvmgh21/. Upon further testing, I noticed that after triggering the script once (hovering over for the first time), subsequent hovers fade in and out correctly.
$("#one").on({
mouseover: function () {
timer = setTimeout(function () {
$("#first").removeClass('hidden').css('opacity', '1');
}, 0);
},
mouseout: function () {
clearTimeout(timer);
$("#first").css({
'opacity': '0'
}).addClass('hidden');
}
});