Clash Royale CLAN TAG#URR8PPP

Gradient overlay is in front of button - not clickable

I have made a gradient overlay on my grid elements.

Everything as actually working as it should, but there is one big problem. On the backend of my CMS system the overlay is in front of a very central button. That is the button I click when I have to change the code on the site.

I do not have access and I am not allowed to overwrite existing functions etc. The whole problem is the following class:

.overlay
position:absolute;
transition:all .3s ease;
/* opacity:0; */
transition:1.9s;
background: #00b1bab8;



If I outcomment opacity:0; I can click on the button. When the opacity is active, I cannot click on the button. It is also not possible to set a z-index, because that is not working. Mostly I am afraid of affecting all other pages if I start overwriting classes etc.

opacity:0;

Is there anyone who have an alternative idea or solution on how I can have the gradient effect, but still use the backend of the CMS system. Is it some javascript there is needed, or is there just an easy solution that I am overseeing?

I posted some of the code there is mostly relevant - here I am thinking the overlay classes.

.image-overlay
position:relative;

.overlay
position:absolute;
transition:all .3s ease;
opacity:0;
transition:1.9s;
background: #00b1bab8;

.image-overlay:hover .overlay
opacity:1;

.overlayFade
background: rgba(27, 27, 27, 0.5);
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
font-size: 15px;
padding-left: 35px;
padding-right: 35px;


<div class="mk row">
<div class="col-sm-12">
<div class="mk row">
<div class="col-sm-6 margin_bottom">
<a href="#">
<div class="image-overlay">
<div class="overlay overlayFade"></div>
<img src="https://vouzalis.dk/test.jpg" alt="John Doe" class="img-responsive"></img>
<div class="inner-wrapper bottom-left">
<h2 class="light-font">Company gear</h2>
<p class="light-font">Se vores udvalg af klasse Company merchandise</p>
</div>
</div>
</a>
</div>
<div class="col-sm-6">
<div class="mk row">
<div class="col-sm-12 margin_bottom">
<a href="#">
<div class="image-overlay">
<div class="overlay overlayFade"></div>
<img src="https://company.dk/Static/Cms/c3a9d70d-8a4c-4121-bb01-4144125708ab.jpg" alt="John Doe" class="img-responsive"></img>
<div class="inner-wrapper bottom-right">
<h3 class="light-font">5 par solbriller</h3>
<p class="light-font">5 brændvarme tilbud</p>
</div>
</div>
</a>
</div>
</div>
<div class="mk row">
<div class="col-xs-6 col-sm-6 margin_bottom">
<a href="#">
<div class="image-overlay">
<div class="overlay overlayFade"></div>
<img src="https://company.dk/Static/Cms/ec68cc2e-f3f1-485f-bbb5-f3b22a052a80.jpg" alt="Følg Company på Snapchat" class="img-responsive"></img>
<div class="inner-wrapper bottom-left">
<h5 class="light-font">Motorsport kasket</h5>
<p class="light-font">Stilet kasket til når solen er skarp</p>
</div>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-6 margin_bottom">
<a href="#">
<div class="image-overlay">
<div class="overlay overlayFade"></div>
<img src="https://company.dk/Static/Cms/74ce064e-942d-4d60-8f2a-5238e40f9a22.jpg" alt="John Doe" class="img-responsive"></img>
<div class="inner-wrapper centered">
<!--<button class="btn btn-success" style="background-color: transparent;">Læs mere</button>-->
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

z-index

1 Answer
1

You can use pointer-events: none; on your overlay to disable any pointer event and effectively "click through" it. Note that this will not work on IE10 or below.

pointer-events: none;

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.