JSFiddle - React, Tailwind, and code Playground

HTML

<table id="tapaintings" border=3>
            <tr>
                <td><a id="painting-1" href="images/painting1.jpg" rel="shadowbox[paintings]" title="painting1"> <img src="images/thumbnails/t_painting1.jpg" alt="painting"></a></td>
                <td><a id="painting-2" href="images/painting2.jpg" rel="shadowbox[paintings]" title="painting-2"> <img src="images/thumbnails/t_painting2.jpg" alt="painting"></a></td>
            </tr>
            <tr>
                <td><a id="painting-3" href="images/painting3.jpg" rel="shadowbox[paintings]" title="painting-3"> <img src="images/thumbnails/t_painting3.jpg" alt="painting"></a></td>
                <td><a id="painting-4" href="images/painting4.jpg" rel="shadowbox[paintings]" title="painting-4"> <img src="images/thumbnails/t_painting4.jpg" alt="painting"></a></td>
            </tr>
            <tr>
                <td><a id="painting-5" href="images/painting5.jpg" rel="shadowbox[paintings]" title="painting5"> <img src="images/thumbnails/t_painting5.jpg" alt="painting"></a></td>
                <td><a id="painting-6" href="images/painting6.jpg" rel="shadowbox[paintings]" title="painting6"> <img src="images/thumbnails/t_painting6.jpg" alt="painting"></a></td>
            </tr>
        </table>

CSS

table tr td{ border: 0; width: 70px; height: 70px; }
a img{
    width: 40px;
    height: 40px;
    border: 1px solid #000;
    padding: 10px;
}

JavaScript

$(function(){
    $('#tapaintings a').mouseenter(function(){
        var id = $(this).attr('id');
        $('a#' + id + ' img').animate({
            'height' : '80px',
            'width'  : '80px'
        });
    });
    $('#tapaintings a').mouseleave(function(){
        var id = $(this).attr('id');
        $('a#' + id + ' img').animate({
            'height' : '40px',
            'width'  : '40px'
        });
    });
});