JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<div id="hoverIcons">
<ul>
    <li class="width16">
        <div class="padding">
            <img class="imgPad" src="http://www.graphicproducts.com/images/label-printers/duralabel-lobo/main/duralabel-lobo.png" width='100%'>
            <h1>Title 1</h1>
        </div>
    </li>
    <li class="width16">
        <div class="padding">
            <img class="imgPad" src="http://www.graphicproducts.com/images/label-printers/duralabel-lobo/main/duralabel-lobo.png" width='100%'>
            <h1>Title 1</h1>
        </div>
    </li>
        <li class="width16">
        <div class="padding">
            <img class="imgPad" src="http://www.graphicproducts.com/images/label-printers/duralabel-lobo/main/duralabel-lobo.png" width='100%'>
            <h1>Title 1</h1>
        </div>
    </li>
            <li class="width16">
        <div class="padding">
            <img class="imgPad" src="http://www.graphicproducts.com/images/label-printers/duralabel-lobo/main/duralabel-lobo.png" width='100%'>
            <h1>Title 1</h1>
        </div>
    </li>
                <li class="width16">
        <div class="padding">
            <img class="imgPad" src="http://www.graphicproducts.com/images/label-printers/duralabel-lobo/main/duralabel-lobo.png" width='100%'>
            <h1>Title 1</h1>
        </div>
    </li>
                    <li class="width16">
        <div class="padding">
            <img class="imgPad" src="http://www.graphicproducts.com/images/label-printers/duralabel-lobo/main/duralabel-lobo.png" width='100%'>
            <h1>Title 1</h1>
        </div>
    </li>
</ul>
</div>

CSS

ul {width:100%;list-style-type: none;margin:0;padding:0;}
li {height:170px;float:left;transition:all .2s linear;position:relative}
h1 {text-align:center;position:absolute;top:80%;width:90%;margin:0;display:none;border-top:3px solid orange;}
.padding {padding:5%;width:90%;height:90%;}
.width16 {width:16.6%}
.width25 {width:30%}
.width15 {width:14%}
.purple {background:purple}
.yellow {background:yellow}
.green {background:green}
.orange {background:orange}
.blue {background:blue}
.red {background:red}

JavaScript

var $liCall = $('#hoverIcons ul li');
var liCount = $liCall.length;

$liCall.hover(
    function(){
        $(this).siblings().addClass('width15').removeClass('width16');
        $(this).addClass('width25').removeClass('width16')
        $(this).find('h1').stop().slideToggle();
        $(this).find('img').addClass('imgPadZero').removeClass('imgPad');
    },
    function(){
        $liCall.removeClass('width15 width25').addClass('width16');
        $(this).children().children('h1').stop().slideToggle(100);
 });