JSFiddle - React, Tailwind, and code Playground

by Lokesh Yadav

HTML

<div class="wrapper">
<ul class="hidden">
    <li class="hidden"></li>
    <li><div>Hover</div></li>
    <li><div>to</div></li>
    <li><div>animate!!</div></li>
    <li class="hidden"></li>
</ul>
    <div>

CSS

body,  ul, li { margin:0; padding:0; }
ul, li { list-style: none; overflow: hidden; }
.hidden {
    visibility: hidden;
}
div {
    overflow: hidden;
    margin: 0 auto;
}

li {
    background-color: lightBlue;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    outline: 1px solid black;
    width: 200px;
    height: 400px;
    float: left;
}

li div {
    background: url("https://placehold.it/250x250") no-repeat 50% 50% transparent;
    margin: 0 -25px;
}

JavaScript

$(function() {

    var count = $('li').length,
    	width = $('li').width(),
        height = $('li').height(),
        containerWidth = width * 3,
        left = '-'+ width;
    
    $('.wrapper').css('width', containerWidth);
    
    $('ul li div').css({
        'width': width + 50,
        'height': height
    });
    var temp = '-' + (width-2) + 'px';
    $('ul').css({
        'width': (containerWidth * count) + 200,
        'margin-left': temp
    }).toggleClass('hidden');
    
    
    $('li').hover(function(){
        $(this).delay(200).stop(true).animate({
            "width": width + 50,
            "margin-left": '-' + 25
        }, 'slow');
 $(this).find('div').delay(200).stop(true).animate({
            "margin-left": '-' + 0,
            "margin-right" : '-' + 0,
     "margin-top": 0,
     "margin-bottom": 0
        }, 'slow');
    }, function(){
        $(this).delay(200).stop(true).animate({
            "width": width,
            "margin-left": 0
        }, 'slow');

        $(this).find('div').delay(200).stop(true).animate({
            "margin-left": '-' + 25,
            "margin-right" : '-' + 25,
     "margin-top": 0,
     "margin-bottom": 0
        }, 'slow');
        
    });
    
});