html - 如何将带有链接的 div 覆盖到图像上

问题描述

我为我的所有图像构建了一个网格系统。当鼠标移过它时，我希望用不同的背景颜色和指向另一个页面的链接覆盖每个图像。网页的名称也将覆盖在图像之上。

 <div class="row1">
     <div id="one" class="column1">
      <a href="#"><img id="chaos" src="" alt="">
     <div class="overlay"> 
     <div class="text">Our Games</div>
     </div></a>
   </div>

   <div class="column1">
     <a href="#"><img id="dragon" src="" alt="">
     <div class="overlay">
       <div class="text">Origin Story</div>
   </div></a>

  <img id="logo" src="" alt="">

     <a href="#"></a><img id="dice" src="" alt="">
       <div class="overlay">
       <div class="text">Contact Us</div>
     </div></a>
  </div>  

  <div class="column1">
     <a href="#"></a><img id="thunder" src="" alt="">
     <div class="overlay">
       <div class="text">Email Sign Up</div>
     </div></a>
  </div> 
</div>

这是我正在使用的 CSS。问题是它只对第一个图像进行叠加，并且叠加仅在鼠标位于图像的最底部时发生。它还对所有图像进行大覆盖，而不仅仅是鼠标所在的一个图像。

     #dragon {
      height: 200px;
     }
    #chaos {
     height: 600px;
    }
   #logo {
    height: 150px;
   }
   #thunder {
     height: 600px;
   }
   #dice {
     height: 235px;
   }

   /*--------------grid for images --------------------------*/

   * {
    box-sizing: border-box;
   }
  body {
    margin: 0;
    background-color: black;
 }
.row1 {
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
 }
 .column1 {
  -ms-flex: 33.33%;
  flex: 33.33%;
  max-width: 33.33%;
  padding: 0 4px;
 }
 .column1 img {
   margin-top: 8px;
   vertical-align: middle;
   width: 100%;
 }
 /*--------------overlay for links--------------------------------*/


  .overlay {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     height: 100%;
     width: 100%;
     opacity: 0;
     transition: .5s ease;
     background-color: black;
   } 
   #one:hover .overlay {
     opacity: 1;
   }
   .text {
     color: white;
     font-size: 20px;
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     text-align: center;
   }

标签： htmlcss

html - 如何将带有链接的 div 覆盖到图像上

问题描述

解决方案

推荐阅读