Making an absolute div hollow?

Question

Currently my dilemma is that I have a div positioned absolute sitting on top of all my code (it has a sliding animation) however I now cannot access the content behind the top div..

This has the animation, but no links or buttons will work: http://oxygenrad.io/index.php

This is without the animated div and has the working links and buttons: http://oxygenrad.io/index-2.php

The div that's causing all of my issues is the following:

<div class="reveal open">
</div>

I understand that I could just destroy the div after :XX seconds, but ideally I was wondering if there was a better solution? All I want to be able to do is click through the div.

Answer 1

Use pointer-events: none; on your div as follows :

.opened {
  background: url(http://uploadir.com/u/9btuxs9t) 0px 660px, url(http://uploadir.com/u/9btuxs9t) 0px -735px;
  pointer-events: none;
  background-repeat: no-repeat;
}

The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.

For IE11 you can use :

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;