JSFiddle - React, Tailwind, and code Playground

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>

CSS

table
{
  border-collapse:collapse;
  table-layout: fixed;
  width: auto;
}
table, th, td {
    border: 1px solid black;
    padding: 0.5em;
    position: relative;
}

.thumb
{
  border: 1px solid black;
  width: 320px;
  height: auto;
  z-index: 0;
}

.thumb:hover {
    width: 600px;
    height: auto;
    z-index: 999;
    border-radius: 10px;
    box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.75);
    position: absolute;
    top: 0;
    left: 0;
}