.character-box{
position: relative;
}
.character-box > p{
position: relative;
display: flex;
flex-direction: column;
margin: 0;
}
.character-box .name{
width: 100%;
padding: 0.25em 0;
position: absolute;
bottom: 0;
text-align: center;
color: white;
background-color: rgba(0,0,0,0.7);
height: 0;
opacity: 0;
transition: height 0.25s ease, opacity 0.25s ease;
}
.character-box:hover .name{
height: 22.4px;
opacity: 1;
}
.character-box .bg{
position: absolute;
width: 100%;
height: 100%;
background-color:lightblue;
}