JSFiddle - React, Tailwind, and code Playground

HTML

<table cellpadding="10" cellspacing="2" border="1">
  <tr>
    <td align="center">Nachname</td>
    <td align="center">Vorname</td>
    <td align="left">Funktion</td>
    <td align="center" class="avatar">
      <img src="https://cdn3.iconfinder.com/data/icons/rcons-user-action/32/boy-512.png" class="norm" alt="avatar"  />
      <img src="https://cdn3.iconfinder.com/data/icons/rcons-user-action/32/boy-512.png" class="big" alt="avatar" />
    </td>
  </tr>
</table>

CSS

td.avatar {
  position: relative;
}
td.avatar img.norm {
  z-index: 1;
  width: 80px;
}
td.avatar img.big {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  width: 250px;
  -moz-transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}
td.avatar:hover img.big {
  opacity: 1;
}