I am currently working on a popup feature that, when displayed, will blur the background of the page to a grey color. The .cover element is responsible for this overlay effect. Unfortunately, I am facing issues overriding its default opacity:0.6; property with the use of !important. My objective is to make the inner <div> opaque while keeping the parent element transparent.
Here is the HTML structure:
<div id="cover">
<div id="popup">
<img src="EFTI_POPOVER2.png" alt="endurance films institute" id="pop-img">
<button id="pop-but" onclick="location.href='http://endurancefilmsti.com/sales/'">
<span id="#but-span">
<strong>YES!</strong>
</span>SHOW ME THE FUTURE OF ENDURANCE SPORTS TRAINING</button>
<a id="back" href="#">No Thanks, Continue Shopping</a>
<a href="#" class="cancel">×</a>
</div>
</div>
For the CSS styling:
#cover{
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:5;
width:100%;
height:100%;
display:none;
opacity:0.6;
}
#pop-img {
opacity: 1 !important;
}