JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td class="bunka">Franta<div class="foto">tady bude fotka</div></td><td>30 let</td><td>bla</td>
    </tr>
    <tr>
        <td class="bunka">Pepa<div class="foto">tady bude fotka</div></td><td>40 let</td><td>bla</td>
    </tr>
    <tr>
        <td class="bunka">Honza<div class="foto">tady bude fotka</div></td><td>8 let</td><td>bla</td>
    </tr>
</table>

CSS

table {
    margin:20px;
}

td {
    border:1px solid #ccc;
    padding: 5px;
    position: relative;
}

.foto {
    width: 50px;
    height: 70px;
    background: silver;
    position: absolute;
    bottom: -70px;
    left:30px;
    display: none;
    z-index: 20;
}

JavaScript

$(".bunka").hover(
    function() {
    $(this).children(".foto").css("display","block");
    },
    function() {
    $(this).children(".foto").css("display","none");
}
);