HTML表格覆盖另一个表格

Question

Look on the "Invited Teams" section

如果我将鼠标悬停在图像上，表格将覆盖图像。要做到这一点，我是否需要使用JavaScript来进行翻译，或者只需使用简单的纯CSS即可。

Answer 1

<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>

Answer 2

只需使用CSS就可以完成。我创建了一个片段来显示它是如何工作的。

＆＃13;

＆＃13;

.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%);
 	opacity: 0;
 	transition: all 0.69s ease;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;