JSFiddle - React, Tailwind, and code Playground

HTML

<div class="blocks">
    <div class="blocks_title">
    </div>
</div>
<div class="blocks">
    <div class="blocks_title">
    </div>
</div>

CSS

.blocks {
    position: relative;
    float: left;
    margin: 20px;
    width: 100px;
    height: 100px;
    border: 1px dotted #333;
    overflow: hidden;
}

.blocks .blocks_title {
    position: relative;
    width: 20px;
    height: 20px;
    top: 80px;
    left: 40px;
    background: #333;
    opacity: 0;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    -o-transition: all .25s;
}

.blocks:hover .blocks_title {
    animation: down-1 .25s;
    -moz-animation: down-1 .25s;
    -webkit-animation: down-1 .25s;
    -o-animation: down-1 .25s; 
    opacity: 1; top:40px;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
}

@keyframes down-1 {   
    0%   {opacity: 0; top:0px;}
    100%   {opacity: 1; top:40px;}
}

@-moz-keyframes down-1 {   
    0%   {opacity: 0; top:0px;}
    100%   {opacity: 1; top:40px;}
}
@-webkit-keyframes down-1 {   
    0%   {opacity: 0; top:0px;}
    100%   {opacity: 1; top:40px;}
}

@-o-keyframes down-1 {   
    0%   {opacity: 0; top:0px;}
    100%   {opacity: 1; top:40px;}
}