微件:九宫格

<style> .thumbnail {

   position: relative;
   z-index: 0;
   display: inline-block;
   width: fit-content;
   width: -webkit-fit-content;
   width: -moz-fit-content;

}

.thumbnail:hover {

   z-index: 999;

}

.cover {

   width: 100px;
   height: 100px;
   object-fit: cover;

}

.thumbnail span img {

   display: none;
   position: fixed;
   width: auto;
   height: auto;
   max-height: 100vh;
   max-width: 100vw;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   margin: auto;
   box-shadow: 6px 6px 8px #666666;

}

.thumbnail:hover span img {

   display: block;

} </style> <script> document.addEventListener('DOMContentLoaded',function() {

   Array.from(document.querySelectorAll('.thumbnail')).forEach((el) => {
      if (!el.querySelectorAll('a').length) {
          var a = el.querySelectorAll('span')[0].querySelectorAll('img')[0].getAttribute('data-src')
          var wrap = el.querySelectorAll('img')[0]
          el.insertAdjacentHTML('afterbegin', '<a href="' + a + '" target="_blank"></a>')
          el.removeChild(wrap)
          el.querySelectorAll('a')[0].appendChild(wrap)
      }
   })

}) </script>