Hover Overlap Issue With a List of boxes - html

Question

I am dynamically creating a bunch of cards. These cards will have an image and some text. When hovering over the image within the card, a bigger image is displayed in the middle of the page.
There are a total of 16 cards on the page. There are four rows with 4 cards in each row. The issue is: when hovering over the 1st card, all the text or images of the next 15 cards overlap the large image that appears when hovering over the small image on the 1st card. When hovering over let’s say the 3rd card, the image is only overlapped by the text/images of cards that appear after that 3rd card. If I hover over the image of the last card on the page, this issue does not occur. Therefore, all the div’s after the card that is being hovered over cause this issue of overlapping.
Things I have tried: z-index which does not work because each card is being generated dynamically. I have also tried to change the position: static or inherit to see if that would help.
Not sure what the problem is and how to fix it?
<div class="biz-card center-block">
<div class="biz-container">
<div class="biz-row">
<div class="col-sm-6">
<div class="biz-photo">
<div class="rounded biz-wrapper"></div>
</div>
</div>
<div class="col-sm-6" style="display: flex;">
<div class="biz-content">
<h6 href="#home">John Doe</h6>
<p class="left-align">Name</p>
</div>
</div>
</div>
</div>
</div>
.biz-card {
min-width: 350px;
max-width: 350px;
min-height: 250px;
max-height: 250px;
border: thin;
border-color: lightgrey;
box-shadow: 3px 6px 6px -2px rgba(0,0,0,0.58);
z-index: 1;
}
.biz-container {
padding-right: 0;
padding-left: 0;
margin-right: auto;
margin-left: auto;
height: 250px;
}
.biz-row {
display: flex;
align-items: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
height: 250px;
}
.biz-photo {
position: relative;
display: block;
width: 145px;
height: 64px;
}
.biz-photodetailed {
display: none;
background: #424242;
opacity: 1;
filter: alpha(opacity=100); /* For IE8 and earlier */
z-index: 1000;
bottom: 0;
height: 848px;
width: 605px;
/*margin: auto;*/
position: fixed;
top: 50%;
left: 50%;
margin-top: -424px; /* Half the height */
margin-left: -302px; /* Half the width */
border: 2px solid #fff;
box-shadow: 10px 10px 5px #ccc;
-moz-box-shadow: 10px 10px 5px #ccc;
-webkit-box-shadow: 10px 10px 5px #ccc;
/*-khtml-box-shadow: 10px 10px 5px #ccc;*/
}
.biz-photo:hover .biz-photodetailed {
display:block;
}
Would anyone be able to help out?