JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="lower">Blah Blah Blah</div>
    <div class="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat elit vel tortor porta, sit amet venenatis purus condimentum. Suspendisse potenti. Aenean ultrices velit ac mattis volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</div>
</div>

CSS

.container{
    width:250px;
    height:300px;
    background:#00f;
    position:relative;
}

.lower{
    position:absolute;
    bottom:0;
    width:100%;
    color:#fff;
    padding:10px 0;
    text-indent:5px;
    background:rgba(0,0,0,.5);
}

.show{
    display:none;
    height:100%;
    width:100%;
    color:#000;
    text-indent:5px;
    background:rgba(255,255,255,.5);
}

.container:hover > .lower{
    display:none;
}

.container:hover > .show{
    display:block;
}