.row { padding: 15px; }
.single-content { position: relative; transition: .3s; cursor: pointer; }
.single-content .text-content, .single-content:after{ position: absolute; left: 20px; right: 20px; }
.single-content:after{ content: ; display: block; background: #FF7700; top: 0px; bottom: 0px; left: 0px; right: 0px; opacity: 0; transition: .4s; transition-timing-function: ease-out; }
.single-content:hover:after{ opacity: .4; }
.text-content{ top: 40%; opacity: 0; z-index: 1; transition: .3s; text-align: center; color: #FFF; }
.single-content:hover .text-content{ opacity: 1; transition-delay: .3s; }