JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#1" class="photo"><img src="img/1.jpg" alt="1">
				<div class="photo_bottom">123</div></a>

CSS

.photo{
display: block;
margin-right: auto;
margin-left: auto;
float: left;
margin-right: 35px;
margin-bottom: 35px;
border:5px solid #fff;
position: relative;
overflow: hidden;
}
.photo_bottom {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 0;
    background: silver;
    transition: height .5s;
}
.photo:hover .photo_bottom {
    height: 40px;
}