JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image">
    <div class="frame">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>

CSS

div.image{
    background:url(http://bi.gazeta.pl/im/8/11317/z11317548H.jpg);
    width:220px;
    height:160px;
}
div.image:hover div.frame{
    border-color: rgba(255, 255, 0, 0.8);
}
div.image:hover p{
    display:block;
}
div.frame{
    height: 140px;
    position:relative;
    border:10px solid rgba(255, 255, 0, 0.5);
}
div.frame p{
    width:100%;
    height: 80px;
    position:absolute;
    background:rgba(255, 255, 0, 0.8);
    bottom:0px;
    display:none
}