JSFiddle - React, Tailwind, and code Playground

HTML

<div class="boxgrid captionfull">
                <img src="path" height="117" width="160" alt="" />
                <div class="cover boxcaption">
                    <h5 align="center">xxxxxxxx</h5>
                    <p align="center"><a href="#" style="text-decoration:none;font-size:16px; font-family:Wanted M54"><b>Click To Play</b></a></p>
                </div>
            </div>

CSS

*{ padding:0px; margin:0px; }

            a{ color:#00c415; }
            h5{
                            margin: 10px 10px 0 10px;
                            color:#FFF;
                            font:13pt Segoe Print;
                            letter-spacing:-1px;
                            font-weight: bold;  }

            .boxgrid{
                /*width: 325px;
                height: 260px; */
                width: 160px;
                height: 117px;
                margin-top:10px;
                                margin-left: 4px;
                float:left;
                background:#161613;

                overflow: hidden;
                position: relative;
            }
                .boxgrid img{
                    position: absolute;
                    top: 0;
                    left: 0;
                    border: 0;
                }
                .boxgrid p{
                    padding: 0 10px;
                    color:#afafaf;
                    font-weight:bold;
                    font:10pt "Lucida Grande", Arial, sans-serif;
                }

            .boxcaption{
                float: left;
                position: absolute;
                background: #000;
                height: 117px;
                width: 100%;
                opacity: .8;
                /* For IE 5-7 */
                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
                /* For IE 8 */
                -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
            }
                .captionfull .boxcaption {
                    top: 117;
                    left: 0;
                }
                .caption .boxcaption {
                    top: 100;
                    left: 0;
                }

JavaScript

$(document).ready(function(){
$('.cover').hide(this);
    $('.boxgrid.captionfull').hover(function(){
   
    $(".cover", this).show().stop().animate({top:'1px'},{queue:false,duration:160});
    }, function() {
    $(".cover", this).show().stop().animate({top:'117px'},{queue:false,duration:160});
});
});