I recently implemented a design feature on my website where I created a transparent div at the bottom of the page to overlay a fixed div. The idea was for the fixed div to be revealed as the user scrolled down, but unfortunately, it seems that the click events are being blocked by the transparent div.
After trying various solutions like setting pointer-events: none; on the transparent div and switching between display: block and display: inline-block, I still couldn't get it to work properly.
//empty transparent div
.section.empty-section {
height: 459px;
pointer-events: none;
display: inline-block;
}
//contact form under the transparent div
.section.footer {
background: #131313;
position: fixed;
bottom: 0;
z-index: -1;
}
.section {
position: relative;
padding: 10 10 10 10;
left: 0;
width: calc(100% - 20px);
color: white;
font-family: "Gadugi";
overflow: hidden;
background-size: contain;
background-repeat: no-repeat;
background-blend-mode: soft-light;
}<div class="section empty-section"></div>
<div class="section footer">
<span class="heading">Contact</span>
<form action="contact.php" method="POST">
<label>Your email address</label>
<br>
<input type="email" name="from-email-address">
<br>
<br>
<label>Your name</label>
<br>
<input type="text" name="from-name">
<br>
<br>
<label>Your message</label>
<br>
<textarea class="email-textbox" name="email-message"></textarea>
<br>
<button class="send-button">Send Email</button>
</form>
</div>https://gyazo.com/83c3f870aa8c0775ca24cf08de71adcf Take a look at this gif of my webpage where you can see the issue with the unclickable form at the bottom.