I'm facing an issue with a div that has a background image, text, and a button in the center. Whenever I add an overlay color on top of the background image, the text and button seem to be disabled or unclickable.
My goal is to ensure that the Read More button is clickable and that the content remains visible and selectable.
Check out my code on jsFiddle: https://jsfiddle.net/yzce0vLt/8/
Here is the relevant HTML code:
<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>
This is the CSS styling being used:
.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);
}
And here is the JavaScript portion for setting the dynamic height:
$(document).ready(function() {
// Dynamic Height
$('.dynamic-height').css({'height':($(window).height())+'px'});
$(window).resize(function(){
$('.dynamic-height').css({'height':($(window).height())+'px'});
});
});