卡在 css 图片库编码中

Question

我一直在努力找出导致此问题的原因，但没能成功。这个图片库是响应式的，但是当我将鼠标指针悬停在缩略图上时，图像显示在左侧主图库中，但缩略图集消失了。尝试了我所知道的一切。我想我已经厌倦了并放弃了 :-(。任何修复它的帮助将不胜感激。提前致谢。

<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

如果我答对了：实际上缩略图不会消失，它会隐藏在悬停图像下面，因为你将悬停图像的宽度和高度设置为 100%，它会覆盖所有 space 是可以展示自己！

关于此部分：（在第二个 <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%;
        }

没有空间容纳其他缩略图！

因此，如果您将这两个属性更改为小于 100% 的值，您也可以看到它们，但请确保也更改主图像的宽度和高度。

您可以用这些样式替换上面的部分来解决您的问题：

    #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%;
    }

卡在 css 图片库编码中

Stuck in css image gallery coding

html

css

gallery