JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<div id="hoverIcons">
<ul>
    <li class="purple width16"><h1>Title 1</h1></li>
    <li class="yellow width16"><h1>Title 2</h1></li>
    <li class="green width16"><h1>Title 3</h1></li>
    <li class="orange width16"><h1>Title 4</h1></li>
    <li class="blue width16"><h1>Title 5</h1></li>
    <li class="red width16"><h1>Title 6</h1></li>
</ul>
</div>

CSS

#hoverIcons {transition:all .3s ease-in-out;}
ul {width:100%;list-style-type: none;margin:0;padding:0;transition:all .3s ease-in-out; }
li {height:200px;float:left;transition:all .5s ease-in-out;position:relative}
h1 {text-align:center;position:absolute;top:150px;width:100%;margin:0;display:none;border-top:3px solid orange;}
.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 width25').removeClass('width16');
        $(this).addClass('width25').removeClass('width16')
        $(this).children().stop().slideToggle();
    },
    function(){
        $liCall.removeClass('width15 width25').addClass('width16');
        $(this).children().stop().slideToggle(100);
 });