JSFiddle - React, Tailwind, and code Playground
by Tan
HTML
<div class="box">
<a href="#">
<img class="pic">
<div>
<b>I Like This</b>
<p>I Like This it is very very cool you know</p>
</div>
</a>
</div>CSS
.box {width:300px;height:180px;position:relative;overflow:hidden;}
.box img {width:300px;height:180px;background-color:#999;}
.box div {position:absolute;bottom:-150px;height:180px;line-height:30px;padding:0 10px;color:#fff;background-color:#666;margin:0;}
.box div:hover {position:absolute;bottom:0px;height:180px;line-height:30px;padding:0 10px;color:#fff;background-color:#666;margin:0;}