您可以向span元素添加类并应用以下样式:
span.text-content {
background: rgba(23, 165, 195, 0.5);
color: white;
cursor: pointer;
display: table;
opacity: 0;
width: 100%;
height: 100%;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
ul li:hover span.text-content {
opacity: 1;
}
.imgCont {
display: table-cell;/*set display to table cell*/
vertical-align: middle;/*add vertical align middle*/
text-align: center;/*add text align to center for horizontal align too*/
}