JSFiddle - React, Tailwind, and code Playground

by Ngoc Hieu

HTML

<div id="wrap">
    <div class="image">
    <div class="detail">
        <p>detail</p>
    </div>
    </div>    
</div>

CSS

#wrap{
    width:300px;
    height:300px;
    position:relative;
    overflow:hidden;
}
.image{
    width:100%;
    height:100%;
    background:red;
}
.detail{
    position:absolute;
    width:100%;
    height:0;
    background:blue;
    bottom:0;
    transition: height 1s;
    -webkit-transition: height 1s;
    -moz-transition: height 1s;
    z-index:9999;
}
.image:hover .detail{
    height:100%;
}