JSFiddle - React, Tailwind, and code Playground

by techunter

HTML

<div class="gL">
    <ul class="list">
    </ul>    
</div>

CSS

body{
    margin:0;
}
div.gL{
    padding:8px;
    width:1008px;
    margin: 0 auto;
    background-color:white;
    height:1%;
    overflow:hidden;
}

div.gL ul li{
    width:320px;
    height:230px;
    margin:8px;
    padding:0;
    float:left;
}


.info{
    position:absolute;
    z-index:5000;
    margin:0;
    padding:0;
    width:320px;
    height:230px;
    background-color:rgba(255,255,255,0.9);
    display:none;
}

.list{
    list-style-type:none;
    margin:0;
    padding:0;
    position:relative;
    list-style-position:inherit;
}
.game{
    position:relative;
    z-index:0;
    padding:0;
    margin:0;
    overflow:hidden;
    text-align: center;
    }

div.info h2{
    font-family:sans-serif;
    padding:0;
    margin-top:32%;
}

img{
    text-align: center;
    min-height:100%;
    width:100%;
    position:relative;
    z-index:0;
    top:0;

}

JavaScript

$(function(){
            $.fn.rollbounce = function(){
                $(this).animate({'top': '-=15px'},150).animate({'top': '+=15px'},100).animate({'top': '-=5px'},100).animate({'top': '+=5px'},100)
            }

            var 
                $list = $('ul.list'),
                $info = $('div.info'),
                $li = '<li class="game"></li>'

            for(var p=0; p <= 68; p++){
                if(p<10){
                    p = '00'+p;
                } else if(p<100){
                    p ='0'+p;
                }


                $list.append($.parseHTML($li))
                console.log('this is number'+p)
                $('.game:nth-child('+p+')').append("<img src='http://www.yongyi-pneumatic.com/upfiles/-ipll-lan-_1ipll-lan-_1-main.JPG'/>").prepend("<div class='info'><h2>This is game #"+p+"</h2></div>")

            };


            $game = $('.game')

            $game.on('mouseenter',function(){
                $(this).rollbounce()
                $(this).children('.info').fadeToggle(200)
            }).on('mouseleave',function(){
                $(this).children('.info').fadeToggle(200)
            })
        });