css – overlapping divs do not allow access to links on the top div

I have made overlapping divs. The lower div has a series of clickable images in it, and the upper div has a “Welcome” image that fades out with mouse movement (https://dev.saraband.com.au/index.php/home/?preview_id = 8 & preview_nonce = 9e7af06a7b & preview = true). the code I used on the top div is

 #Welcome-id{

    opacity : 1;
}
:hover ~ #Welcome-id {
    opacity : 0;z-index:0;
}
 #Welcome-id:hover {
    opacity : 0; z-index:5;

}

  #Welcome-id:not(hover) {
    animation-delay:8s;
    -webkit-animation-delay:8s;
    -webkit-transition: opacity 1s ease-out;
    opacity : 1;
}

 #Welcome-id:not(hover) {
    animation-delay:8s;
    -moz-animation-delay:8s;
    -moz-transition: opacity 1s ease-out;
    opacity : 1;
}

Everything works fine, except I can not click on any of the links in the top div. Any help would be greatly appreciated.

Leave a Comment