JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<li>    
    <div class="brand-content">        
        <div class="brand-thumbnail">           
            <h1 class="brand-title">
                Hello
            </h1>              
                   
            <img class="imgclass"  src="http://clubworld360.com/data/venues/1404/full_noImage%20-%20Copy%20(2)%20-%20Copy.jpg"/>            
        </div>        
    </div>    
</li>

CSS

li {
   list-style:none;
    display:inline;
}
.brand-title { display:none; }


img.imgclass {
    width:100px;
    height:auto:
}

JavaScript

$(function() {
    $("li").hover(function(){
        var $li = $(this);
        //hide img
        $li.find('.imgclass').hide();
        $li.find('.brand-title').fadeToggle(function() {
            $li.find('.imgclass').show();
        });
    });  
});