.byl-hero { width: 100%; position: relative; cursor: pointer; } .byl-hero img { width: 100%; } .byl-hero h4 { position: absolute; color: #dbdbdb; bottom: 0px; opacity: 1; } .byl-hero:hover h4 { color: #ffffff; } .byl-hero-fader { position: absolute; top: 0; height: 100%; width: 100%; background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0, #0a0a0a 100% ); } .byl-hero:hover .byl-hero-fader { background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.2) 0, #000 100% ); }