.overlay-container { position: relative; text-align: center; width: 100%; } .overlay-container .image { display: block; width: 100%; height: auto; } .overlay-container .overlay-mask { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0); transition-property: color, background-color; transition-duration: 0.25s, 0.25s; transition-timing-function: ease-in-out; } .overlay-container:hover .overlay-mask { background-color: rgba(0, 0, 0, 0.7); color: rgba(255, 255, 255, 1); } .overlay-container .overlay-content { padding-left: 15%; padding-right: 15%; height: 100%; display: flex; flex-direction: column; justify-content: center; text-decoration: none; }