grid with hover images

grid with hover images

HTML

<table>
  <tr>
    <th style="width: 10em;">th1</th>
    <th style="width: 330px;">th2</th>
    <th style="width: 330px;">th3</th>
    <th style="width: 330px;">th4</th>
  </tr>
  <tr>
    <th>row1</th>
    <td>some example text before the image <img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Alice_%28apple%29.jpg" /></td>
    <td><img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/f/f1/Ambrosia_apples_2017_A3.jpg" />some example text after the image</td>
    <td><img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Malus-Ananasrenette.jpg" /></td>
  </tr>
  <tr>
    <th>row2</th>
    <td><img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/4/41/Arkansas_Black_apples_%28cropped%29.jpg" /></td>
    <td><img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/e/e8/Aroma.jpg" /></td>
    <td><img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Malus-Boskoop_organic.jpg" /></td>
  </tr>
</table>

SCSS

table, th, td
{
  border:1px solid black;
  padding: 0.5em;
  position:relative;
}
table
{
  border-collapse:collapse;
  table-layout: fixed;
  width: 1000px; // table-layout fixed seems to only works if you then give it a width
}
.thumb
{
  border: 1px solid black;
  width: 320px;
  height: auto;
  position: relative; // need to specify 'position' to use z-index
  z-index: 0;
}
.thumb:hover
{
  position:absolute;
  top:0;
  left:0;
  width: auto;
  height: auto;
  z-index: 999;
  border-radius: 10px;
  box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.75);
}