JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Description text
        <span>Reveal this</span>
    </li>
    <li>Description text
        <span>Reveal this other thing</span>
    </li>
</ul>

CSS

li {
    height:100px;
    width:120px;
    border:1px solid #ccc;
    float:left;
    position:relative;
    margin:0 12px 12px 0;
}
li span {
    display:block;
    overflow:hidden;
    height:0px;
    width:100%;
    position:absolute;
    bottom:0;
    background:rgba(0,0,0,1);
    color:#fff;
    -moz-transition: height 0.5s ease-in-out;
    -webkit-transition: height 0.5s ease-in-out;
    transition: height 0.5s ease-in-out;
}
li:hover span {
    height:110%;
}