JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <img class="image" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTYc9OZPCw5dsNlqnQ7DKUoE3XS9ul1otjMcHplsrIh_z_bwqW2wg">
    <img class="icon" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Moon_Crescent_-_False_Color_Mosaic.jpg/200px-Moon_Crescent_-_False_Color_Mosaic.jpg">
    <div>
        <div>
            <img class="image" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTYc9OZPCw5dsNlqnQ7DKUoE3XS9ul1otjMcHplsrIh_z_bwqW2wg">
            <img class="icon" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Moon_Crescent_-_False_Color_Mosaic.jpg/200px-Moon_Crescent_-_False_Color_Mosaic.jpg">
        </div>

CSS

.icon {
    opacity:0;
}

JavaScript

$('.image, .icon').hover(function(e) {
    if(e.type === 'mouseenter' && $(e.target).is('.image')){
        $('.icon').stop().animate({"opacity": 0}); 
        $(this).siblings('.icon').stop().animate({"opacity": 1}); 
    }
    if(e.type === 'mouseleave' && $(e.target).is('.icon')){
        $('.icon').stop().animate({"opacity": 0});
        
    }
});