The issue with the positioning of your card image not displaying at the top of the stack and overlapping the
<div class="card-large">
container as intended when setting it to the highest
z-index
value is due to the fact that the
<img>
elements are absolutely positioned relative to their parent
.card-large
. This means that the images are confined to the boundaries of that specific container.
To resolve this, you can place your .card-large
container within a new parent <div>
and apply a position: relative
property to the new parent element. By doing so, your images will then appear above the .card-large
container when the .icon
images are hovered over, as expected.
/* Card Large */
.wrapper {
position: relative;
}
.card-large {
background-color: #283046;
border-radius: .4rem;
display: block;
margin-bottom: 1rem;
padding: 1rem;
overflow: auto;
color: #fff;
}
.card-large > h4 {
color: #eee;
font-size: 1.3em;
margin: 0;
}
/* Tables */
#sets-individual-page .background .box-table {
margin-bottom: 2rem;
}
.table {
color: #fff !important;
font-size: .8rem;
border-spacing: 2px;
}
.table tr {
min-height: 2rem;
}
.table th,
.table td {
padding: .3rem .5rem .2rem .5rem !important;
vertical-align: middle;
}
.table tr .standard > div,
.table tr .foil > div {
display: inline;
padding-right: .75rem;
margin: 0;
}
#sets-individual-page .background tr .standard .btn-icon,
#sets-individual-page .background tr .foil .btn-icon,
#sets-individual-page .background tr .standard .btn-icon .icon,
#sets-individual-page .background tr .foil .btn-icon .icon {
margin: 0 .2rem;
text-align: center;
}
.table tr .standard input,
.table tr .foil input {
height: 1.25rem;
width: 2.5rem;
margin: 0;
text-align: right;
}
.table-hover tbody tr:hover td,
.background .table-hover tbody tr:hover th {
color: #f6f6f6;
background-color: #161d31;
}
.table .icon,
.table .symbol {
width: 1rem;
height: 1rem;
margin-right: .3rem;
margin-bottom: .1rem;
}
/* MTG Card Images */
.large {
position: absolute;
display: none;
left: 20%;
top: 15%;
}
.btn-icon:hover + .large {
display: block;
z-index: 999;
}
.large-image {
position: absolute;
border-radius: 1rem;
z-index: 999;
width: 18.75rem;
height: 26.125rem;
}
<div class="wrapper">
<div class="card-large">
<h4>Cards</h4>
<table class="table table-hover table-sm text-nowrap">
<thead>
<tr>
<th scope="col" style="width: 03%;" class="text-end">
<h5>#</h5>
</th>
<th scope="col" style="width: 25%;" class="">
<h5>Name</h5>
</th>
<th scope="col" style="width: 15%;" class="">
<h5>Type</h5>
</th>
<th scope="col" style="width: 07%;" class="">
<h5>Rarity</h5>
</th>
<th scope="col" style="width: 10%;" class="">
<h5>Mana Cost</h5>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-end">1</td>
<td class="">
<span class="btn-icon btn-icon-primary">
🖼️
<img class="icon" src="/static/img/icons/image.png">
</span>
Chandra, Torch of Defiance
<span class="large">
<img class="large-image" src="https://c1.scryfall.com/file/scryfall-cards/normal/front/c/7/c7bbb911-9de2-455d-9677-e1004db65dbd.jpg?1593559500" height="500">
</span>
Chandra, Torch of Defiance
</td>
<td class="">Legendary Planeswalker — Chandra</td>
<td class="">Mythic</td>
<td class="">
<img class="symbol" src="/static/img/symbology/2.png">
<img class="symbol" src="/static/img/symbology/R.png">
<img class="symbol" src="/static/img/symbology/R.png">
</td>
</tr>
<tr>
<td class="text-end">2</td>
<td class="">
<span class="btn-icon btn-icon-primary">
🖼️
<img class="icon" src="/static/img/icons/image.png">
</span>
<span class="large">
<img class="large-image" src="https://c1.scryfall.com/file/scryfall-cards/normal/front/8/c/8c1a02f9-3ce7-46e9-8d0e-0d491bb13012.jpg?1593559582" height="500">
</span>
Cathartic Reunion
</td>
<td class="">Sorcery</td>
<td class="">Rare</td>
<td class="">
<img class="symbol" src="/static/img/symbology/1.png">
<img class="symbol" src="/static/img/symbology/R.png">
</td>
</td>
</tr>
<tr>
<td class="text-end">3</td>
<td class="">
<span class="btn-icon btn-icon-primary">
🖼️
<img class="icon" src="/static/img/icons/image.png">
</span>
Chandra, Torch of Defiance
<span class="large">
<img class="large-image" src="https://c1.scryfall.com/file/scryfall-cards/normal/front/c/7/c7bbb911-9de2-455d-9677-e1004db65dbd.jpg?1593559500" height="500">
</span>
Chandra, Torch of Defiance
</td>
<td class="">Legendary Planeswalker — Chandra</td>
<td class="">Mythic</td>
<td class="">
<img class="symbol" src="/static/img/symbology/2.png">
<img class="symbol" src="/static/img/symbology/R.png">
<img class="symbol" src="/static/img/symbology/R.png">
</td>
</tr>
</tbody>
</table>
</div>
</div>