HTML表格覆蓋另一個表格

Question

Look on the "Invited Teams" section

如果我將鼠標指向圖像，表格會覆蓋圖像。要做到這一點，我需要使用JavaScript來做翻譯，或者它只是簡單的純CSS來做到這一點。

Answer 1

可以通過使用CSS簡單地完成。我創建了一個片段來顯示它的工作原理。

.overlay-container img { 
 
    top: 50%; 
 
    left: 50%; 
 
    position: absolute; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.overlay-container span { 
 
    color: white; 
 
    top: 50%; 
 
    left: 50%; 
 
    position: absolute; 
 
    transform: translate(-50%, -50%); 
 
    \t opacity: 0; 
 
    \t transition: all 0.69s ease; 
 
} 
 

 
.overlay-container:hover span { 
 
\t opacity: 1; 
 
}

<div class="overlay-container"> 
 
    <img src="http://placehold.it/400x400" alt=""> 
 
    <span> 
 
    <table> 
 
     <thead> 
 
     <tr> 
 
      <th>Page</th> 
 
      <th>Visits</th> 
 
      <th>% New Visits</th> 
 
      <th>Revenue</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>/index.html</td> 
 
      <td>1265</td> 
 
      <td>32.3%</td> 
 
      <td>$321.33</td> 
 
     </tr> 
 
     <tr> 
 
      <td>/about.html</td> 
 
      <td>261</td> 
 
      <td>33.3%</td> 
 
      <td>$234.12</td> 
 
     </tr> 
 
     <tr> 
 
      <td>/sales.html</td> 
 
      <td>665</td> 
 
      <td>21.3%</td> 
 
      <td>$16.34</td> 
 
     </tr> 
 
     <tr> 
 
      <td>/blog.html</td> 
 
      <td>9516</td> 
 
      <td>89.3%</td> 
 
      <td>$1644.43</td> 
 
     </tr> 
 
     <tr> 
 
      <td>/404.html</td> 
 
      <td>23</td> 
 
      <td>34.3%</td> 
 
      <td>$23.52</td> 
 
     </tr> 
 
     <tr> 
 
      <td>/services.html</td> 
 
      <td>421</td> 
 
      <td>60.3%</td> 
 
      <td>$724.32</td> 
 
     </tr> 
 
     <tr> 
 
      <td>/blog/post.html</td> 
 
      <td>1233</td> 
 
      <td>93.2%</td> 
 
      <td>$126.34</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </span> 
 
</div>

Answer 2

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/css/mdb.min.css" rel="stylesheet"/> 
 

 
<div class="view overlay hm-grey-strong"> 
 
    <img src="http://www.viktorlarsson.com/wp-content/uploads/2017/01/hello-world-banner.jpg" class="img-fluid" alt=""> 
 
    <div class="mask flex-center"> 
 
     <table class="table table-hover"> 
 
      <tr><td>abd</td><td>xyz</td></tr> 
 
      <tr><td>abd</td><td>xyz</td></tr> 
 
      <tr><td>abd</td><td>xyz</td></tr> 
 
      <tr><td>abd</td><td>xyz</td></tr> 
 
      <tr><td>abd</td><td>xyz</td></tr> 
 
     </table> 
 
    </div> 
 
</div>