CSS responsive hexagon grid - IE hover issue - html

Question

I've created a webpage based around this pen:
https://codepen.io/onediv/pen/JGmgK (not sure how much help the code here is but I've been told to copy and paste it!)
#lab {
width: 1000px;
overflow: hidden;
padding-bottom: 70px;
position: relative;
margin: 0 auto;
margin-bottom: 2.5em;
background: rgb(236, 236, 236);
-webkit-transition: all ease 500ms;
-moz-transition: all ease 500ms;
-o-transition: all ease 500ms;
-ms-transition: all ease 500ms;
transition: all ease 500ms;
}
h1 {
font-family: bebas_neueregular ,sans-serif;
font-size: 1.75em;
padding: 0.2em 0 0.2em 0.2em;
color: white;
text-shadow: 0 0.06em 0 #424242;
position: relative;
}
#lab h1 {
background: #B0DAD4;
}
.beaker {
-webkit-filter: drop-shadow(#424242 0px 1px 0px);
border-bottom: 2em solid #FFF;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
border-radius: .5em;
height: 0;
width: 1em;
position: absolute;
right: 0.7em;
bottom: 22%;
font-size: 0.6em;
}
.beaker::before {
border-left: .25em solid #FFF;
border-radius: .25em;
border-right: .25em solid #FFF;
content: '';
height: .25em;
left: -.25em;
position: absolute;
top: -1em;
width: 1em;
}
.beaker::after {
border-left: .25em solid #FFF;
border-right: .25em solid #FFF;
content: '';
height: 1em;
left: 0;
position: absolute;
top: -1em;
width: .5em;
}
.sectionheader {
position: relative;
}
.lab_item {
width: 200px;
height: 230px;
position: relative;
display: inline-block;
}
.hexagon2 {
position: absolute;
width: 200px;
height: 400px;
top: -85px;
}
.hexagon {
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
cursor: pointer;
}
.hexagon-in1 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon-in2 {
-webkit-box-shadow: inset 0 0 0 200px rgba(176, 218, 212, 0.48);
box-shadow: inset 0 0 0 200px rgba(176, 218, 212, 0.48);
overflow: hidden;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
-webkit-background-size: 125%;
-moz-background-size: 125%;
background-size: 125%;
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.hexagon-in2:hover {
-webkit-box-shadow: inset 0 0 0 0px #B0DAD4;
box-shadow: inset 0 0 0 0px #B0DAD4;
}
#lab article {
padding-top: 1em;
width: 820px;
margin: 0 auto;
}
.lab_item:nth-child(7n-2) {
margin-left: 101px;
}
.lab_item:nth-child(n+5) {
margin-top: -55px;
}
#media (max-width: 1015px) {
#lab {
width: 100%;
}
}
#media (max-width: 820px) {
.lab_item:nth-child(5n-1) {
margin-left: 102px;
}
.lab_item:nth-child(n+4) {
margin-top: -62px;
}
.lab_item:nth-child(7n-2) {
margin-left: 0px;
}
.lab_item:nth-child(n+5) {
margin-top: -56px;
}
#lab article {
width: 610px;
}
}
#media (max-width: 640px) {
#lab article {
width: 405px;
}
.lab_item:nth-child(5n-1) {
margin-left: 0px;
}
.lab_item:nth-child(3n) {
margin-left: 102px;
}
.lab_item:nth-child(n+3) {
margin-top: -56px;
}
}
#media (max-width: 450px) {
#lab article {
width: 300px;
}
.lab_item:nth-child(3n) {
margin-left: 0px;
}
.lab_item:nth-child(2n) {
margin-left: 102px;
}
.lab_item:nth-child(n+2) {
margin-top: -56px;
}
}
It all looks great except on IE, where the hover state for the next row of hexagons starts well within the content of the first row of hexagons. It presumably hovers over the full extent of the hexagon content even though it isn't visible. Same problem exists for this pen: https://codepen.io/web-tiki/pen/HhCyd
Can anyone help solve this hover issue? Would it be possible to solve by z-indexing the respective hexagons so each sits on top of the other, or is there an IE-specific solution? It works perfectly on Chrome and FireFox.