Template:CharacterBox/styles.css

.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;
}