Halnex Halnex - 2 months ago 7
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/

HTML

<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>
</div>
</div>
</div>


CSS

.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;
}
.overlay-x:before{
position: absolute;
content:" ";
top:0;
left:0;
width:100%;
height:100%;
display: none;
z-index:0;
}
.overlay-x:before{
display: block;
}
.dark:before {
background-color: rgba(0,0,0,0.5);
}
.light:before {
background-color: rgba(255,255,255,0.5);
}


JS

$(document).ready(function() {
// Dynamic Height
$('.dynamic-height').css({'height':($(window).height())+'px'});
$(window).resize(function(){
$('.dynamic-height').css({'height':($(window).height())+'px'});
});
});

Answer

Add this to your css

 .btn {
  z-index: 100;
}

This will move the button over your overlay.

Comments