div 아래의 div를 클릭 가능하게 만들기

내 온라인 포트폴리오를위한 숨겨진 엄지 갤러리를 개발 중입니다. 이 빌드의 목표는 코드를 가능한 기본으로 유지하여 모든 브라우저에서 실행되도록하는 것입니다.

순수한 CSS-hidden-thumb 갤러리에 대한 훌륭한 솔루션처럼 느껴지는 것에 도달하는 동안 문제가 발생했습니다. 클래스가 "Divpop2"인 div는 지정된 호버 영역으로 이후에 transform : translateY 속성을 사용하여 팝업되도록 엄지 갤러리를 실행합니다. 문제는 썸 갤러리가 Z- 색인이 더 높은 div (Divpop2 ")로 덮여 있다는 것입니다. div (Divpop2)의 Z- 색인이 높을수록 숨겨진 썸 갤러리가 갤러리를 트리거하는 div를 가리지 않습니다. 숨김 해제.

JSFiddle : http://jsfiddle.net/NickCParker/n5m549q9/

.Divcontainer{
width: 800px;
height: 500px;
border: 1px solid;
margin: 0px auto;
position: relative;
}

.Divpop0{
    width: 25px;
    height: 200px;
    border: 1px solid;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    top: 140px;
    opacity: 1;
    -webkit-transition: opacity 1s;
}

.Divpop1{
    width: 25px;
    height: 200px;
    border: 1px solid;
    float: right;
    margin: 0;
    padding: 0;
    position: relative;
    top: 140px;
    opacity: 1;
    -webkit-transition: opacity 1s;
}
.Divpop1:hover{opacity: 1;}

.Divpop2{
    opacity: 1;
    z-index: 9998;
    width: 750px;
    height: 100px;
    margin: 0px auto;
    border: 1px solid;
    position: relative;
    top: 398px;
}
.Divpop3{opacity: 1;
    position: relative;
    top: 399px;
    border: solid 1px;
    width: 798px;
    height: 100px;
    background-color: blue;
    -webkit-transition-duration:.5s;
        }

.Divpop2:hover ~ .Divpop3{
    opacity:1;
    -webkit-transform:translateY(-103px);
} 


.thumbed{overflow: hidden; white-space:nowrap; margin:0 45px}
.thumbed ul{float: left; transform:translateX(0)}
ul li {display: inline-block; padding-top: 6px;}
li a:hover, a:focus{opacity:1;}
li a{opacity:0.85;}
li a:focus{opacity:1;}
ul li img {width: 135px; }

이것은 앞뒤 문제이므로 다른 언어를 사용하지 않고 간단한 방법이 있는지 궁금합니다. 모든 통찰력을 높이 평가합니다.