Stuck in css image gallery coding - html

Question

I have been trying to figure out what causes this issue but couldn't. This image gallery is responsive but when I hover my mouse pointer on the thumbnails the image is shown on the left side main gallery but the thumbnail set disappears. Tried everything I know. I think my mind got fed up and gave up :-(. Any help in fixing it will be much appreciated. Thanks much in advance.
<style>
#gallery_container {
position: relative;
margin-bottom: 16px;
}
#gallery_mobile_container {
position: relative;
}
.gallery_main {
position: absolute;
visibility: hidden;
opacity: 0;
top: 0px;
left: 0px;
transition: visibility 0s, opacity 0.5s;
text-align: left; /*changing image appears on the left*/
background-color: #ffffff;
}
.gallery_large_img_table .gallery_main {
visibility: visible;
opacity: 1;
position: relative;
}
.gallery_thumbnail:hover > .gallery_main {
visibility: visible;
opacity: 1;
}
.gallery_thumbnail {
padding:2px;
cursor: pointer;
text-align: center;
}
.gallery_thumbnail_img {
transition: opacity 0.5s;
max-width: 100%;
max-height: 230px;
}
.gallery_thumbnail_img:hover {
opacity: 0.5;
}
</style>
<style>
#gallery_container .gallery_large_img_table {
width: 100%;
}
#gallery_container .gallery_main {
width: 100%;
height: 100%;
}
#gallery_container .gallery_main img {
max-width: 100%;
max-height: 100%;
}
</style>
<div style="display: table-cell; width: 90%; height: auto; text-align: center; vertical-align: top; padding: 7px; border: 1px solid #202020; border-radius: 12px;">
<div id="desc" name="desc">
<div id="gallery_container">
<table class="hide_product_photo">
<tbody>
<tr>
<td style="width: 80%; vertical-align: top;"> <!--width: 80% of the total Gallery is taken by main image-->
<!---css code here--->
<table class="gallery_large_img_table">
<tbody>
<tr>
<td>
<div class="gallery_main">
<img src="https://i.imgur.com/6h1GdR5.jpg"> <!--non-grid standalone image-->
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 20%; vertical-align: top;"> <!--width: 20% of the total Gallery is taken by thumbnails-->
<table>
<tbody>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/ZDUmji7.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/ZDUmji7.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/ByPVSkn.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/ByPVSkn.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/dXQjDR7.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/dXQjDR7.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/5SR520h.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/5SR520h.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/3uJiUDq.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/3uJiUDq.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/2dWjFD0.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/2dWjFD0.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/LUCcLCL.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/LUCcLCL.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/q0Y4Cdb.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/q0Y4Cdb.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/8VJF5pE.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/8VJF5pE.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/8VJF5pE.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/8VJF5pE.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/8VJF5pE.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/8VJF5pE.jpg">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Answer 1

If I got the question right: Actually the thumbnail will not disappear, it will hide under the hovered image because you set hovered image width and height to 100% and it will cover all of the space is available to showing itself!
on this section: (inside the second <style> tag)
#gallery_container .gallery_large_img_table {
width: 100%;
}
#gallery_container .gallery_main {
width: 100%;
height: 100%;
}
#gallery_container .gallery_main img {
max-width: 100%;
max-height: 100%;
}
there are no rooms for other thumbnail images!
so if you change these two attribute to something fewer than 100% you can see them as well but be sure to change the main image width and height too.
you can replace the above section with these styles to solve your issue:
#gallery_container .gallery_large_img_table {
width: 80%;
}
#gallery_container .gallery_main {
width: 80%;
height: 80%;
}
#gallery_container .gallery_main img {
max-width: 80%;
max-height: 80%;
}