JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<ul id="test">
<li class="more">   
            <a href="javascript:void(0);"><img src="http://lh6.googleusercontent.com/-1rSJG2SXNnE/TxpRRi_JClI/AAAAAAAAAN4/uHle7L0T_Ec/s24/Gear.png"/></a>
            <span>This is My gear!</span>
    </li>
    <li class="more">   
            <a href="javascript:void(0);"><img src="http://lh6.googleusercontent.com/-1rSJG2SXNnE/TxpRRi_JClI/AAAAAAAAAN4/uHle7L0T_Ec/s24/Gear.png"/></a>
            <span>I am Gear</span>
</li>
    <li class="more">   
            <a href="javascript:void(0);"><img src="http://lh6.googleusercontent.com/-1rSJG2SXNnE/TxpRRi_JClI/AAAAAAAAAN4/uHle7L0T_Ec/s24/Gear.png"/></a>
            <span>How are you?</span>
</li>
    <li class="more">   
            <a href="javascript:void(0);"><img src="http://lh6.googleusercontent.com/-1rSJG2SXNnE/TxpRRi_JClI/AAAAAAAAAN4/uHle7L0T_Ec/s24/Gear.png"/></a>
            <span>I love List</span>
</li>
    </ul>

CSS

.more{  position:relative; width:25px; height:25px;  padding:2px; text-align:left; overflow:hidden; }
            
.more span{ position:absolute; left:32px; width:160px; padding:0px 0 0 0px; color:#000; font-weight:bold ;  }

#test{ position:relative; top:50px; left:213px;}

JavaScript

$(".more").hover(function(){
                $(this).stop().animate({width: '225px' },200).css({'z-index' : '10'}); 
            }, function () {
                $(this).stop().animate({width: '25px', height: '25px' }, 200).css({'z-index' : '1'});
              });