JSFiddle - React, Tailwind, and code Playground

by Ishank Dubey

HTML

<div class=wrapper>
    <div class="container">
        <div class="image">
        </div>
        <div class="cost">
            cost: $4.99
        </div>
    </div>
</div>

CSS

.wrapper
{
    width:200px;
    height:200px;
    border:solid 2px red;
}
.container
{
    width:200px;
    height:200px;
    background-color:#000;
    position:;
}
.image
{
    position:absolute;
    top:0px;
    left:0px;
    background-image:url(http://www.sat2home.com/satspacer//mobile/MobileTV.jpg);
    background-position:50% 50%;
    background-size:contain;
    background-repeat:no-repeat;
    z-index:1;
}
.cost
{ 
    position:absolute;
    width:200px;
    height:30px;
    top:200px;
    left:10px;
    right:0px;
    /*bottom:0px;*/
    background-color:red;
    color:#000;
    font-size:13px;
    /*padding-top:170px;*/
    transition:all linear 0.5s;
    -moz-transition: all linear 0.5s;
	-webkit-transition: all linear 0.5s;
    z-index:-1;
}

JavaScript

$(document).ready(function(){
    $('.container').hover(function(){
        $('.cost').css({top:'230px'});
    },
        function(){
        $('.cost').css({top:'200px'});
        }        );

});