Halnex Halnex - 1 year ago 54
CSS Question

Content becomes disabled when I apply an overlay color on the background image div

I have a div with a background image, and at the center of the div, I have text and a button.

The problem is, when I apply an overlay color over the background image the text and button become unclickable, like they're disabled.

I need to be able to click the

Read More
button and make the content visible and selectable.

jsFiddle https://jsfiddle.net/yzce0vLt/8/


<div class="col-md-12 dynamic-height">
<div class="item dynamic-height">
<div class="item-container dynamic-height content-center overlay-x dark" style="background: url('http://placehold.it/1920x1280') center center; background-size: cover;">
<a href="#" class="btn btn-primary">Read More</a>


.col-md-12, .item, .item-container {
height: 600px;

/* Align Content */
.content-center {
display: flex;
justify-content: center;
align-items: center;

/* Background Overlay */
.overlay-x {
position: relative;
position: absolute;
content:" ";
display: none;
display: block;
.dark:before {
background-color: rgba(0,0,0,0.5);
.light:before {
background-color: rgba(255,255,255,0.5);


$(document).ready(function() {
// Dynamic Height

Answer Source

Add this to your css

 .btn {
  z-index: 100;

This will move the button over your overlay.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download