JSFiddle - React, Tailwind, and code Playground

by lecollective

HTML

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



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

CSS

.brand-thumbnail .hide {
	display: none;
}
li {
    list-style:none;
    display:inline-table;
}
.brand-thumbnail .show {
	display:inline-table;
	width:80px;
    text-align:center;
	padding:10px;
	position:absolute;
	background-color:#ddd;
}
img.imgclass {
    width:100px;
    height:auto:
}

JavaScript

$("#brand").hover(function(){
$('#brand-roll').toggleClass('show');
    
});

$("#brand-uniqueid1").hover(function(){
$('#brand-roll-uniqueid1').toggleClass('show').fadeToggle(400);
    
});