JSFiddle - React, Tailwind, and code Playground

by Krzysztof Niecikowski

HTML

<div class="img-box">
<div class="img-caption"></div>
</div>

CSS

.img-box {
    position: absolute;
    width:200px;
    height:200px;
    background: rgba(2, 21, 30, 0.74);
    text-align: center;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
   
.img-caption {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(2, 21, 30, 0.74);
    text-align: center;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.img-caption::before{
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 100%;
    opacity: 0;
    border: 5px solid #008ed6;
    border-bottom: 0;
    border-right: 0;
    -webkit-transition: all .5s ease .5s;
    transition: all .5s ease .5s;
}

.img-box:hover .img-caption::before {
    bottom: 10px;
    opacity: 1;
}
.img-box:hover .img-caption {
    top: 0;
    bottom: 0;