JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<div class="box">
    <div class="box_content">
        <img class="inner_img" src="http://placehold.it/1000x1000" />
        <div class="title">The Title</div>
    </div>
</div>

CSS

.box {
    position: relative;
}

.box_content {
    position: absolute;
    top: 0;
    left: 0;
}

.title {
    position: absolute;
    top: 80%;            /* This moves it to the bottom (initial state) */
    width: 100%;
    height: 20%;
    background: rgb(148, 193, 31);
    background: rgba(148, 193, 31, 0.5);
    transition: top 1s;
}

.box:hover .title {
    top: 0;            /* This moves it to the top (only on hover) */
}