JSFiddle - React, Tailwind, and code Playground

by Silambarasan_sundaram

HTML

<div id="foo2">

    <img src="http://icons.iconarchive.com/icons/iconshow/button-design-pack/32/02-Basket-icon.png" width="150"/><span>haispan</span>
    <img src="http://icons.iconarchive.com/icons/iconshow/button-design-pack/32/02-Basket-icon.png" width="150" /><span>haispan</span>
    <img src="http://icons.iconarchive.com/icons/iconshow/button-design-pack/32/02-Basket-icon.png" width="150" /><span>haispan</span>
                        

                    </div>

CSS

#foo2 img{padding-bottom:15px;}
#foo2 span{ width:150px; text-align:center; display:inline-block;margin-left:-150px; display:none;}

JavaScript

$(document).ready(function(){    
    $("#foo2 img").hover(function () {
       // $(this).next().css({"visibility" : "visible"});   
        $(this).next().css({"display" : "inline-block"});
    },function () {
        //$(this).next().css({"visibility" : "hidden"}); 
        $(this).next().css({"display" : "none"}); 
    });
});