HTML eine Tabelle Overlay eine andere Tabelle

Question

Look on the "Invited Teams" section

Wenn ich meine Maus auf das Bild bewegen, wird eine Tabelle mit dem Bild überlagern. Um das zu tun, brauche ich JavaScript, um die Übersetzung zu machen, oder einfach nur reines CSS, um das zu tun.

Answer 1

Es kann einfach durch Verwendung von CSS erfolgen. Ich habe ein Snippet erstellt, um anzuzeigen, wie es funktioniert.

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