transparent text over hover table

by watchduck

HTML

<div class="wrapper">
  Touch me!
  <table class="hidden">
    <tr><td>..................</td></tr>
    <tr><td>..................</td></tr>
    <tr><td>..................</td></tr>
    <tr><td>..................</td></tr>
    <tr><td>..................</td></tr>
    <tr><td>..................</td></tr>
  </table>
</div>


<span class="green">This is green text.</span><br>
<span class="red">This is transparent red text.</span>

CSS

table.hidden {
  display:none;
  position: absolute;
  background-color: #ffefc1;
  color: #e5c15b;
  border: 1px solid #e5c15b;
  /* z-index: 1; */
}

div.wrapper:hover table.hidden {
  display: block;
}

span.green {color: green;}
span.red {color: red; opacity: .5;}